寻找一种类似于“摆动”效果的缓动方式，可以在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中同时使用。请包含任何所需插件的链接。

- Dan Abramov

---

刚刚发现我可以采用贝塞尔格式（也被CSS3使用）作为jQuery缓动效果，以获得一致的缓动效果。链接 - Dan Abramov

更好的是，jquery.easie 为 jQuery 提供了精确的 CSS3 缓动效果。 - Dan Abramov

个人推荐这个插件，因为它不会在所有缓动函数前加上“easie”前缀，但这只是个人偏好。你可能想在CSS3中尝试ease-in-out，以实现一种摇摆的动画效果。 - Bojangles

你问如何使用CSS3实现“swing”。当你本来可以直接使用原始的jQuery swing时，使用jQuery插件来“模拟”CSS缓动效果有什么帮助呢？ - Sparky

那么在CSS3中实现“摆动”的最接近方法将是内置于CSS3“transition-timing-function”属性中的“ease-out”。 - Sparky

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

---

任务

我使用了Sparky672的答案中的这些图表来查找精确的函数及其参数：

它与y = -x•（x – 2）相同，其中x介于0和1之间。
因此，我使用abettercalculator创建了一个图形：

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

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

- Dan Abramov

Answer 2

根据W3C的规定，transition-timing-function 属性只允许使用以下缓动函数：

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(<number>, <number>, <number>, <number>)

如果你能将 "swing" 转换为一个 cubic-bezier 函数，那么就可以使用它了。并且从这里的图形表示中看来，transition-timing-function 内置的 ease-out 与 swing 的形状非常相似。

---

根据评论进行编辑：

如果您更喜欢使用jQuery来进行缓动效果，那么您甚至不需要插件。您只需定义您喜欢的函数并使用它即可...

不使用插件使用jQuery缓动函数

- Sparky

---

我刚刚尝试了 ease-out，但不幸的是它对我来说效果不佳（差异很明显）。我做了一个澄清：现在使用jQuery进行一个动画和CSS3进行另一个动画要容易得多。唯一的问题是如何正确地获取缓动效果。否则，感谢提供的信息！ - Dan Abramov

@DanAbramov，如果 ease-out不够接近，那么使用 cubic-bezier 尝试复制它是 CSS3-only 解决方案的另一个选择。 - Sparky

谢谢，我会尝试并让您知道结果。 - Dan Abramov

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关键帧动画，我们可以获得CSS转换的GPU增强性能，并使用JavaScript中自定义缓动方程式所允许的灵活性。

我的缓动引擎使用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

- Jim Jeffers

---

哇，这很棒。有支持IE的吗？ - Dan Abramov

然而，他询问的是如何使用CSS3实现，而不是JavaScript。 - Sparky

@Sparky672 是的，但我正在展示如何使用JavaScript和CSS3一起完成它。而不是将它们视为互斥的选项。 - Jim Jeffers

我也很感兴趣...但从社区管理的角度来看，这并不是一个答案...除非他编辑了他的原始问题 ;) - Sparky

嘿@Jim，感谢你的所有帮助。我刚刚发布了我的解决方案。 - Dan Abramov