Как сделать анимацию не зависимой от продолжительности?

Question

Я использую jQuery с Плагином Easing , и я хотел бы добиться постоянного времени замедления для анимаций любой продолжительности:

Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
 10ms                     10ms

Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
 10ms                                           10ms

Где <<<< / >>>>периоды замедления / замедления, а --- обозначает движение с постоянной скоростью.

Существует ли функция или плагин замедления для этого или я должен дать зависящую от времени пользовательскую функцию для каждой анимации, подобную этой, иесли да, то какой?

Answer 1

Вы можете использовать функцию обратного вызова в .animate() вызовах для цепочки анимаций:

var $obj     = $('#some-id'),
    ani_dist = 500;

//animate first easing
$obj.stop().animate({ left : 100 }, 500, 'easeOutCirc', function () {

    //animate main body of the animation
    $obj.animate({ left : (ani_dist - 100) }, 1000, 'linear', function () {

        //animate the last easing
        $obj.animate({ left : ani_dist }, 500, 'easeInCirc');
    });
});

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

Answer 2

Я думаю, что вы должны использовать одушевленную королеву

//animate first easing
$obj.stop()
    .animate({ left : 100 }, 500, 'easeOutCirc')
    .animate({ left : (ani_dist - 100) }, 1000, 'linear')
    .animate({ left : ani_dist }, 500, 'easeInCirc')
;

См. jQuery.animate, пример-2