循環Velocity.js自定義效果序列

我正在使用Velocity UI庫進行文本動畫。我註冊了兩個效果（在& Out中，因此它處理顯示屬性），並且它們按順序運行。我如何循環序列？我試圖在序列中的最後一個選項中觸發它，但它不起作用（因爲序列的運行不是函數）。循環Velocity.js自定義效果序列

我在堆棧溢出和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);

來源

2017-10-05 Helga

你能夠提供一個Codepen或類似的，我們可以看看你的代碼的結果，並能夠幫助你運行循環？ –

它在測試頁面上運行，具有完整的數據：[link]（http://www.viragcukor.hu/landing-v1.php）。我很快就創建了一個Codepen。 – Helga

太棒了，請在設置工作的Codepen時註釋。 –

所有你需要做的是計算你的序列的總時間提前，然後再打一個電話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);

來源

2017-10-05 13:11:41

謝謝，這個效果很好。我想爲所有元素都有不同的隨機數，但這不是問題，我可以生成並將其添加到總時間中。此外，錯開還需要額外的時間。非常感謝您的幫助，我非常感謝！ – Helga

當然，我的榮幸，很高興我能幫上忙。 –

僅供將來參考：與此同時，我還發現動畫文本的長度與動畫文本的長度不同，因此動畫已經隨機排列。我所要做的就是以不同的方式設置第一個元素的持續時間。非常感謝！ – Helga

循環Velocity.js自定義效果序列

回答

相關問題