jquery - 如何使动画缓动(缓入和缓出)与持续时间无关？

Question

我正在使用 jQuery Easing plugin我希望为任何持续时间的动画实现恒定的缓动时间:

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');
    });
});

我不确定您想要将动画设置为动画或使用多长时间，但有一个想法。