jquery - 寻找一个类似 “swing” 的 easing 可以用 jQuery 和 CSS3 表达

Question

我必须同时对一个对象执行两个动画。
出于多种原因，我想对垂直动画使用 jQuery，对水平动画使用 CSS3。

在 jQuery 方面，swing 缓动效果很好:

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

我正在寻找一种在 CSS3 过渡中表达这种缓动功能的方法。

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

Answer 1

长话短说

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

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));            

与jquery.easie (你也可以使用 bez )。

---

任务

我用了these graphs来自 Sparky672's answer找出确切的函数及其参数:

它与 y = –x • (x – 2) 相同，其中 x 介于 0 和 1.
所以我用 abettercalculator 创建了一个图表:

我把它剪下来放到网上了。
然后使用position: absolute 覆盖cubic-bezier.com ，由 Jim Jeffers 建议。

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