step function with velocity.js?

step function with velocity.js?

本文关键字：js velocity with function step      更新时间：2023-09-26

我最近从jQuery动画切换到velocity.js动画来提高性能。切换很麻烦，因为语法基本相同。然而，使用jQuery的step -函数似乎不能与它一起工作:

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

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

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

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]给进度选项传递一个回调函数，在整个动画过程中重复触发。回调函数传递调用状态的数据。这些数据可以用于自定义渐变等。

这是一个可能有用的演示。

相关文章：