Question

我最近从jQuery动画切换到velocity.js animations以提高性能。切换很糟糕，因为语法大小相同。但是，使用jQuery＆＃39; step - 函数似乎无法使用它：

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

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

我有一个聊天应用程序，当我动画元素时＃39;高度，我需要聊天保持向下滚动。使用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可能有用。希望有所帮助。

使用velocity.js的步进函数？

1 个答案: