如何使动画缓动（缓入和缓出）与持续时间无关？

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

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