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

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

Loop Velocity.js sequence of custom effects

javascript

velocity.js