Задача
Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем jQuery.animate.
Решение фиговое
Javascript
1 | $("#kv2").animate({left: 550, width: 100},1000); |
2 | $("#kv3").animate({top: 450, width: 100},1000); |
3 | $("#kv4").animate({left: 550, top: 450, width: 100},1000); |
5 | setTimeout(function() {$("div").css("background","green");}, 1001); |
Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая сработает один раз по завершению анимации:
Javascript
04 | на значение данного параметра будут опираться вычисления для остальных объектов и свойств. |
05 | выбираем с которым проще работать и меньше математических действий |
11 | step: function(now, fx) |
13 | $("#kv2").css({"width": 50+(now-250)/6+"px"}); // вычисляем ширину данного блока в зависимости от положения |
14 | $("#kv3").css({"top":now-100+"px", "width": 50+(now-250)/6+"px"}); // вычисляем top этого блока относительно положения left у #kv2 |
15 | $("#kv4").css({"top": now-100+"px", "left": now+"px", "width": 50+(now-250)/6+"px"}); // вычисляем позицию блока отностельно left у #kv2 |
19 | $("div").css("background","green"); |
Отследить эффект можно с помощью Хромовского файрбага, вкладки «Timeline».
Чем сложнее анимация, больше количество объектов участвует в ней и дольше длиться по времени, тем больше прирост производительности даст такой подход.
Подробней о функции step
Она принимает два парамтера: now и fx.
Now — значение анимированного свойства в данный момент (на данном шаге анимации). При чем следует заметить, что если анимированных свойств несколько например так:
Javascript
1 | $("#kv2").animate({left: 550, width: 100}, |
тогда now на каждом шаге будет возврщать два значения: left и width. Выделить нужное из них я не нашел способа. Поэтому анимирую одно свойства, остальные меняю в функции step.
Параметр fx возвращает несколько значений, которые могут пригодиться:
| Атрибут | Тип | Опиcание |
|---|
| fx.elem | DOM элемент | анимируемый элемент |
| fx.start | number | начальное значение анимируемого свойства |
| fx.end | number | конечное значение анимируемого свойства |
| fx.prop | String | свойство, которое меняется |
| fx.unit | String | единицы измерения изменяемого свойства |
| fx.pos | Number | коэффициент со значением в прделах 0.0 — 1.0. Чем ближе к концу анимации, тем значение ближе к 1. |
| fx.startTime | Number | время когда анимация стартовала |
| fx.options.duration | Number | длительность всей анимации |
Статья взята с сайта:https://xiper.net/
