루프 Velocity.js 맞춤 효과 시퀀스

Question

텍스트 애니메이션을 위해 Velocity UI 라이브러리를 사용하고 있습니다. 나는 두 개의 효과를 등록했다 (따라서 & Out에 표시 속성을 처리한다). 그리고 그것들은 순서대로 실행 중이다. 어떻게 시퀀스를 반복 할 수 있습니까? 시퀀스의 마지막에 옵션으로 트리거하려고 시도했지만 작동하지 않습니다 (시퀀스 실행이 함수가 아니기 때문에).

스택 오버플로와 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);