Boucle Séquence Velocity.js d'effets personnalisés

Question

J'utilise la bibliothèque Velocity UI pour l'animation de texte. J'ai enregistré deux effets (Dans & Out, donc il gère la propriété d'affichage), et ils sont en cours d'exécution dans une séquence. Comment puis-je boucler la séquence? J'ai essayé de le déclencher comme une option à la fin de la séquence, mais cela n'a pas fonctionné (car l'exécution de la séquence n'est pas une fonction). J'ai parcouru les réponses ici sur Stack Overflow et sur Github, mais je n'ai pas trouvé de réponse. S'il vous plaît donnez-moi une suggestion ce qui serait un bon moyen de le mettre sur une boucle infinie. Je vous remercie!

$.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

Tout ce que vous devez faire est de calculer le temps total de votre séquence à l'avance, puis appelez votre séquence dans un appel 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); 

Si vous quelque temps plus tard décider d'arrêter la boucle, vous devez ajouter ce qui suit à votre code pour arrêter la boucle:

clearInterval(interval);