Question

我正在使用Velocity UI库进行文本动画。我已经注册了两个效果（In＆amp; 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自定义效果序列

1 个答案: