如何在 Velocity.js 中使用 'easeOutBack' 缓动

Question

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

我还将 jqueryui 包含在我的项目中，作为最后的努力，看看它是否有帮助。运气不好。

这是我正在使用的：

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

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

Answer 1

如the docs所述：

Pre-packaged into Velocity are jQuery UI's easings, except for the back, bounce, and elastic easing types.

很遗憾，easeOutBack 宽松你不会有任何好运。

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

如何在 Velocity.js 中使用 'easeOutBack' 缓动

How to use 'easeOutBack' easing with Velocity.js

jquery

velocity.js