изменение поведения JQuery замедления

Question

Когда у вас есть смягчение для анимации, анимация следует уравнению этого замедления. Этот скрипт очень хорошо описывает то, что я имею в виду.

Давайте предположим, что я выбрал Easing, любое замедление и время анимации, например, 1000 мс. Анимация будет полностью следовать уравнению ослабления. Если я разделю время до 500 мс, период анимации будет разделен, но он заполнит то же уравнение замедления.

Я хочу разделить не только время, но и уравнение ослабления. То есть анимация завершена, но она не следует полному уравнению, а только половине.

Это немного сложно, я знаю, мне интересно, есть ли решение.

Answer 1

Я бы взглянул на функцию шага (http://api.jquery.com/animate/). В зависимости от коллекции / объекта, который вы анимируете, это может стать решением вашей проблемы. Еще одна хорошая статья для чтения - http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm. Надеюсь, это поможет:

Step Function Вторая версия .animate () предоставляет параметр шага - функция обратного вызова, которая запускается в каждый шаг анимации. это функция полезна для включения пользовательских типы анимации или изменение анимация, как это происходит. Это принимает два аргумента (сейчас и FX), и это установлено для элемента DOM быть анимированным

• сейчас: числовое значение свойство анимируется на каждом этапе • fx: ссылка на jQuery.fx прототип объекта, который содержит количество свойств, таких как Elem для анимированный элемент, начало и конец для первого и последнего значения анимированное свойство соответственно и опора для свойства, являющегося оживляемым. Обратите внимание, что функция шага называется для каждого анимированного свойства на каждом анимированный элемент. Например, учитывая два элемента списка, функция шага срабатывает четыре раза на каждом этапе анимация:

$ ('li'). Animate ({непрозрачность: .5,
высота: '50% '}, {шаг: function (сейчас, fx) { var data = fx.elem.id + '' + fx.prop + ':' + now; $ ('body'). append ('' + data + ''); }});