JQuery easing: Как объединить анимацию в одну анимацию?

Question

У меня есть две анимации, которые я хотел бы сгруппировать как одну анимацию, чтобы замедление перенеслось и продолжилось в следующей анимации.Вторая анимация должна начаться после завершения первой.Это то, что я имею до сих пор, но замедление начинается заново, когда начинается вторая анимация (что я и ожидал).

$progressBar.animate({width: progressBarWidth + '%'}, barAnimationSpeed, 'swing', function(){
    $overGoalBar.animate({width: overGoalBarWidth + '%'}, barAnimationSpeed, 'swing', function(){});
});

Вот пример того, как это работает сейчас .

Как я могу сгруппировать эти анимации в одну замедляющую анимацию?

Answer 1

Вот отличный онлайн-инструмент для написания пользовательской функции замедления ...

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

Кроме того, здесь приведена дополнительная информация об упрощении ... вам не нужноплагин замедления, если у вас есть функция замедления.Из ссылок, содержащихся внутри, вы можете увидеть демонстрацию каждой из них, а затем сравнить ее с функцией замедления за ней ...

Как добавить ускорение к этой анимации jQuery?

Answer 2

Вы пробовали использовать linear?

$('#progressBar').animate({width: 50 + '%'}, 2500, 'linear', function(){
    $('#overGoalBar').animate({width: 49 + '%'}, 2500, 'linear', function(){});
});

Это примечание, точно связывающее две анимации вместе, но оно действительно сглаживает.

http://jsfiddle.net/dkBMA/11/

Answer 3

Если вы хотите продемонстрировать динамически создаваемое процентное значение индикатора выполнения с эффектом замедления.

Я бы использовал фон, созданный сервером Image

ex) Использование библиотеки GD в PHP

и установите это изображение в качестве фона для одного тега DIV в CSS.

#progressBar { background-img('Dynamically-created-image.jpg'); }

Наконец, просто анимируйте один тег DIV один раз.

Если я вас правильно понялэта идея может сработать.