Javascript 循环Velocity.js自定义效果序列

我正在使用Velocity UI库制作文本动画。我已经注册了两个效果（In&Out，因此它处理display属性），它们是按顺序运行的。如何循环序列？我试图在序列的最后一个部分将其作为一个选项触发，但它不起作用（因为序列的运行不是一个函数）

我在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);

---

您只需提前计算序列的总时间，然后在

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

---

您是否能够提供代码笔或类似工具，我们可以查看代码的结果，并帮助您运行循环？它正在测试页面上运行，包含完整数据：。我也很快设置了一个代码笔。太好了，请在设置工作代码笔后发表评论。谢谢！谢谢，这个很好用。我希望所有元素都有不同的随机数，但这不是问题，我可以生成并将其添加到总时间中。此外，交错也需要额外的时间。非常感谢你的帮助，我真的很感激！当然，我很高兴，很高兴我能帮上忙。仅供将来参考：与此同时，我还发现动画已经被交错随机分配，因为动画文本长度不同。我所要做的就是以不同的方式设置第一个元素的持续时间。非常非常感谢！