Задача
Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем 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/