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

Question

我正在使用带有缓动插件的 jQuery，我想为任何持续时间的动画实现恒定的缓动时间：

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