本文介绍了寻找可以用jQuery和CSS3表达的类似于“Swing”的轻松的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须同时对一个对象执行两个动画。
出于多种原因，我希望使用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介于0和1之间。所以我用abettercalculator：创建了一个图表
我将其裁剪并放到网上。
然后按照Jim Jeffers的建议，使用position: absolute覆盖cubic-bezier.com。
我使用的结果近似值是[.02, .01, .47, 1]。
这篇关于寻找可以用jQuery和CSS3表达的类似于“Swing”的轻松的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！