javascript - Loop Velocity.js 自定义效果序列

Question

我正在使用 Velocity UI 库制作文本动画。我已经注册了两个效果(In & Out，因此它处理显示属性)，并且它们按顺序运行。我怎样才能循环序列？我试图在序列的最后作为一个选项触发它，但它没有用(因为序列的运行不是一个函数)。

我在 Stack Overflow 和 Github 上浏览了这里的答案，但我找不到答案。请给我一个建议，将它置于无限循环中的好方法是什么。谢谢!

$.Velocity.RegisterUI("mythingIn", {
    calls: [ 
         [{ color: "#fff", opacity: 1 }, 0.5],
         [{ color: "#ffac00" }, 0.5]
    ]
});

$.Velocity.RegisterUI("mythingOut", {
    calls: [ 
        [{ opacity: 0 }] 
    ]
});

var a1wordflow1 = [
    { e: $('.a1w-1-1'), p: ("mythingIn"), o: { stagger: 70, duration: Math.random()*6000+14000 } },
    { e: $('.a1w-1-1'), p: ("mythingOut"), o: { stagger: 70, duration: 800 } },
    { e: $('.a1w-1-2'), p: ("mythingIn"), o: { stagger: 70, duration: Math.random()*6000+14000 } },
    { e: $('.a1w-1-2'), p: ("mythingOut"), o: { stagger: 70, duration: 800 } },
];

$.Velocity.RunSequence(a1wordflow1);

Answer 1

您需要做的就是提前计算序列的总时间，然后在 setInterval 调用中调用您的序列。

$.Velocity.RegisterUI("mythingIn", {
    // ...
});

$.Velocity.RegisterUI("mythingOut", {
    // ...
});

const rand = Math.random()*6000+14000;

var a1wordflow1 = [
    { e: $('.a1w-1-1'), p: ("mythingIn"), o: { stagger: 70, duration:  rand } } ,
    { e: $('.a1w-1-1'), p: ("mythingOut"), o: { stagger: 70, duration: 800 } },
    { e: $('.a1w-1-2'), p: ("mythingIn"), o: { stagger: 70, duration: rand } },
    { e: $('.a1w-1-2'), p: ("mythingOut"), o: { stagger: 70, duration: 800 } },
];

let totalTime = 2 * rand + 1600 + maybeSomeOtherTime;

const interval = setInterval(() => {
    $.Velocity.RunSequence(a1wordflow1);
}, totalTime);

如果您稍后决定停止循环，则需要将以下代码添加到代码中以停止循环:

clearInterval(interval);