jQuery 如何使动画缓动（缓入和缓出）与持续时间无关？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8824030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make animation easing (ease-in and ease-out) duration-independent?
提问by Ernests Karlsons
I'm using jQuery with Easing pluginand i would like to achieve constant easing times for for animations of any duration:
我正在使用带有Easing 插件的jQuery，我想为任何持续时间的动画实现恒定的缓动时间：
Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
10ms 10ms
Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
10ms 10ms
Where <<<</ >>>>are easing-in / easing-out periods, and ---denotes constant velocity movement.
其中<<<</>>>>是缓入/缓出时期，---表示匀速运动。
Is there an easing function/plugin for that or should i give a time-dependent custom function for each animation like this and, if yes, then what kind?
是否有一个缓动函数/插件，或者我应该为每个动画提供一个与时间相关的自定义函数，如果是，那么是什么样的？
回答by Jasper
You can use the callback function in the .animate()calls to chain animations:
您可以在.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');
});
});
I'm not sure what you want to set the animation to animate or what duration to use but there's an idea.
我不确定您想将动画设置为动画的内容或使用的持续时间，但有一个想法。
回答by wener
I think you should use the animate queen
我认为你应该使用动画女王
//animate first easing
$obj.stop()
.animate({ left : 100 }, 500, 'easeOutCirc')
.animate({ left : (ani_dist - 100) }, 1000, 'linear')
.animate({ left : ani_dist }, 500, 'easeInCirc')
;
