寻找一个“摆动”式的缓和，用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 最相似的缓和功能（例如Bézier曲线） 并且可以在jQuery和CSS3中使用两者。请包含指向任何所需插件的链接。

Answer 1

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

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] 。

Answer 2

As per the W3C，您只能在transition-timing-function属性上使用以下缓动功能。

• 容易
• 线性
• 易于在
• 易于出
• 易于进出
• 立方贝塞尔（<number>, <number>, <number>, <number>）

如果你可以翻译“swing”into a cubic-bezier function，你可以这样做。

此外，查看graphical representations here，似乎ease-out内置的transition-timing-function与swing的形状非常相似。

---

根据评论编辑：

如果您只是使用jQuery进行缓动，那么您甚至不需要插件。您可以定义首选功能并使用它......

jQuery easing functions without using a plugin

Answer 3

您仅限于预设或简单的三次贝塞尔曲线。我通过在javascript中创建一个缓动引擎来解决这个问题，该引擎会生成作为转换执行的CSS关键帧动画：

bounceDownTransition = new Sauce()
bounceDownTransition.recipe( (element) ->
   element.change("y").from(-200).using(Easie.bounceOut)
   element.change("scale").from(0).using(Easie.circOut)
)

bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id")

您可以在此结帐项目： https://github.com/jimjeffers/Sauce

通过使用CSS关键帧动画，我们通过在javascript中使用我们自己的自定义缓动方程式，获得了CSS转换的GPU增强性能和灵活性。

我的缓动引擎使用了Robbert Penner方程的端口。匹配jswing的那个应该是这样的：

@sineIn: (time,begin,change,duration) ->
    -change * Math.cos(time/duration * (Math.PI/2)) + change + begin

https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218

<强>更新

根据评论 - 如果您愿意，可以使用以下工具尝试匹配挥杆过渡曲线：

http://cubic-bezier.com/#.41,.66,.54,.91