寻找可以用jQuery和CSS3表达的类似于“Swing”的轻松

2022-03-17 00:00:00 jquery css css-transitions jquery-easing

我必须同时对一个对象执行两个动画。
出于多种原因,我希望使用jQuery来制作垂直动画,使用CSS3来制作水平动画。

在jQuery方面,swing轻松效果很好:

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

我正在寻找在CSS3过渡中表示此缓和函数的方法。

如果不可能,我正在寻找与最相似的的缓和函数(例如贝塞尔曲线)swing
并且可以在jQuery和CSS3中使用。请包括指向任何必需插件的链接。


解决方案

TL;DR

我发现[.02, .01, .47, 1]Bézier曲线提供了足够好的近似值。

CSS3

-webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
-moz-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
transition: all 1s cubic-bezier(.02, .01, .47, 1); 

jQuery

$(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));            

WITHjquery.easie(您也可以使用bez)。


任务

我使用these graphsfromSparky672's answer找出了确切的函数及其参数:

y = –x • (x – 2)相同,其中x介于01之间。
所以我用abettercalculator:

创建了一个图表

我将其裁剪并放到网上。
然后按照Jim Jeffers的建议,使用position: absolute覆盖cubic-bezier.com。

我使用的结果近似值是[.02, .01, .47, 1]

相关文章