velocity.js 的步进函数？

Question

我最近从 jQuery 动画切换到 velocity.js animations 以提高性能。切换很麻烦，因为语法基本相同。但是，使用 jQuery 的 step 函数似乎无法使用它：

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

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，可能会有用。希望对您有所帮助。

velocity.js 的步进函数？

step function with velocity.js?

javascript

jquery

animation

velocity.js