如何使用 Velocity.js 的“easeOutBack”缓动

Question

我正在使用veloicty.js 为我的网站上的元素设置动画。除了easeOutBack，我几乎可以使用任何其他缓动方法。我以为我读到除了“反弹”效果之外的所有内容都包含在库中。

我还将 jqueryui 包含到我的项目中，作为最后的努力，看看这是否有帮助。没有运气。

这是我正在使用的：

$('element').mouseenter(function (event) {
    $(this).find('h2').velocity({
        'top': 20
    }, {
        'duration': 300,
        'easing': 'easeOutBack'
    });

或者，我是否需要通过使用 2 个速度调用手动创建该效果。一个让元素的位置超过 20，然后另一个回到 20？

Answer 1

如the docs中所述：

预打包到 Velocity 中的是 jQuery UI 的缓动，除了后退、反弹和弹性缓动类型。

所以很遗憾，easeOutBack 缓动你不会有任何运气。

但是，由于它是一个简单的预定义三次贝塞尔曲线，您可以简单地使用它的值来生成效果，使用：[0.175, 0.885, 0.32, 1.275] 作为easing 选项的值。