带有velocity.js的阶梯函数？

Question

我最近从 jQuery 动画切换到 velocity.js animations 以提高性能。切换很浪费，因为语法大同小异。但是，使用 jQuery 的 step-function 似乎无法使用它：

$(".elem").velocity({
    height:100
},{
    step:function(now,fx){
        if(wasScrolledDown) $("body").scrollDown();
    }
});

velocity.js 中是否有类似的东西可以用来在每一帧上运行一个函数？

我有一个聊天应用程序，当我为元素的高度设置动画时，我需要聊天保持向下滚动。使用 jQuery 动画，我的解决方案是在每一帧上运行 .scrollDown()。 .scrollDown() 是我自己的扩展，它只是滚动到所选元素的末尾。

Answer 1

Velocity 有一个进度选项，相当于 jQuery 步骤。语法如下所示：

$element.velocity({
    opacity: 0,
    tween: 1000 // Optional
}, {
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

来自doc：[选项：进度] 将进度选项传递给回调函数，以便在动画持续时间内重复触发。回调函数传递有关调用状态的数据。此数据可用于自定义补间等。

这里是a demo，可能有用。希望对您有所帮助。