여러 애니메이션 간의 CSS 애니메이션 진행

Question

기본적으로 Adobe Edge Animate를 사용하여 사이트에 대한 소개 정보를 작성했습니다. 하지만 직접 코드를 직접 작성하려고합니다. 그리고 그 결과로 저는 질문이 있습니다.

배열을 기반으로 여러 애니메이션을 어떻게 문자열링하겠습니까?

다음은 내가 생각하는 것입니다 : 1. 배열에는 각 이미지의 이름이 있습니다. 2. 각 이미지를 한 번에 하나씩 화면 전체에 애니메이션으로 표시하려고합니다. 3. 각 이미지는 완료되기 전에 한 번 애니메이션이 적용됩니다.

animationEnd 이벤트를 사용하는 방법을 알고 있습니다. 기본적으로, 컨테이너 div에 자식을 추가하고, 애니메이션에 클래스를 할당하고, animationEnd를 사용하여 완료 시점을 알게되며, 그 시점에서 다음 이미지로 이동하려고합니다.

그러나 animationEnd가 실행되기를 기다릴 필요가있을 때 어떻게 각 이미지를 반복 할 수 있습니까? 어떤 아이디어? 누구든지이 문제를 다루는 훌륭한 튜토리얼을 알고 있습니까?

모든 안내에 감사드립니다. 많은 코드를 작성하라고 요구하는 것이 아니라, 애니메이션 기다리는 동안 루핑을 할 수있는 방법을 설명하십시오. 그게 내가 내 머리 속에 갇혀있는 곳이라고 생각해.

Answer 1

자신을 여러 번 호출하는 함수 인 "되풀이 함수"를 사용해야합니다. 일반적으로 루프처럼 많이 작동하지만 비동기 작업 (예 : animationEnd 이벤트)의 경우 가끔씩 가장 쉬운 방법입니다.

귀하의 경우 사용의 예는이 될 것이다 :

var imgs=[/*images here*/]; 
function nextAnimation(curInd){ 
    var thisImg=imgs[curInd]; 
    //create the image element, trigger the animation, etc here 
    //put the img element itself into a variable named imgElt, then: 
    imgElt.addEventListener('animationEnd',function(){ 
     //only call the function again if this isn't the last item in the array 
     if(curInd+1!=imgs.length) 
      nextAnimation(curInd+1); 
    },false); 
} 
nextAnimation(0); 

몇 번을 통해 읽기, 당신은 잠시 후에 그것을 이해해야합니다. 또한 반복적 기능의 온라인 예제를 찾아보십시오. 너무 많은 프로그래밍을하지 않은 경우 마스터하기가 까다로운 개념입니다.