Оптимизация jQuery.animate

      Комментариев к записи Оптимизация jQuery.animate нет

Задача

Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем 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);
4     
5 setTimeout(function() {$("div").css("background","green");}, 1001);

Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая сработает один раз по завершению анимации:

Javascript
01 $("#kv2").animate(
02         {
03             /*
04                 на значение данного параметра будут опираться вычисления для остальных объектов и свойств.
05                 выбираем с которым проще работать и меньше математических действий
06             */
07             left: 550
08         },
09         {
10             duration: 1000,
11             step: function(now, fx)
12             {
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
16             },
17             complete: function()
18             {
19                 $("div").css("background","green");
20             }
21         }
22         );

Отследить эффект можно с помощью Хромовского файрбага, вкладки «Timeline».

Чем сложнее анимация, больше количество объектов участвует в ней и дольше длиться по времени, тем больше прирост производительности даст такой подход.

Подробней о функции step

Она принимает два парамтера: now и fx.

Now — значение анимированного свойства в данный момент (на данном шаге анимации). При чем следует заметить, что если анимированных свойств несколько например так:

Javascript
1 $("#kv2").animate({left: 550, width: 100},
2 [...]

тогда 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/