Question

我正在使用Easing plugin的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 example-2

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

2 个答案: