javascript - 带 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 step。语法如下:

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

From the doc: [Option: Progress] Pass the progress option a callback function to be repeatedly triggered througout the duration of an animation. The callback function is passed data on the status of the call. This data can be leveraged for custom tweening and more.

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