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

我使用jQuery与Easing plugin，我想实现恒定宽松次任意时间的动画：如何使动画缓解（缓解和缓解）与持续时间无关？

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

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

凡<<<</>>>>的缓解，在/缓和超时周期，并---表示常数速度运动。

是否有缓动功能/插件，或者我应该给这样的每个动画的时间相关的自定义函数，如果是的话，那么是什么样的？

来源

2012-01-11 Ernests Karlsons

可以使用回调函数在.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'); 
    }); 
});

我不知道你想要什么，设置动画以动画或什么时间使用，但有一个想法。

来源

2012-01-11 17:50:10 Jasper

这是一个解决方案，我想过了，但是问题是，更长和更流畅的动画，这是很难适应的宽松政策在两端都有功能 - “连接点”总是有一点摆动。是否有一个以45度线结束的缓存功能图，而水平开始？ – 2012-01-11 18:01:09

@ErnestsKarlsons下面是不同缓动类型的一些图表：http://jqueryui.com/demos/effect/easing.html – Jasper 2012-01-11 18:03:40

愚蠢的，只需要查看它们。出于某种原因，我确信没有什么合适的。对不起，谢谢你的快速回答！ – 2012-01-11 18:08:38

我认为你应该使用动画女王

//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

来源

2013-07-21 12:08:44 wener

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

回答

相关问题