2012-07-10 8 views
1

HTML5 캔버스와 자바 스크립트를 사용하여 애니메이션을 만들려고합니다. Javascript에 대한 사전 지식이 거의 없습니다. 애니메이션의 첫 번째 부분은 가장자리가 십자가에 닿을 때까지 원을 '자라고'만드는 것입니다. 십자가는 원의 가장자리를 따라 움직입니다. 개별적으로 이러한 부분은 잘 작동하지만 setInterval()을 사용하고 있기 때문에 두 애니메이션은 두 번째 애니메이션을 시작하기 전에 첫 번째 애니메이션이 끝날 때까지 기다리는 대신 동시에 재생됩니다.자바 스크립트의 순차적 애니메이션

가장 쉬운 방법은 무엇입니까? HTML 버튼을 사용하면 만족 스럽지만 <button onclick="setInterval(aRot,30);">Next Step</button>은 작동하지 않는 것 같습니다.

코드 내 'orrible'odgepodge이 http://jsfiddle.net/jtYkN/12/

+1

당신은 당신의 인생을 더 쉽게 만드는 [라파엘 (http://raphaeljs.com/)의 라인을 따라 뭔가를 사용할 수 말하는 것을 구현하는 것이 방법. – egasimus

+0

가장 쉬운 방법은 현재 애니메이션을 수행하는 방법에 따라 다릅니다. 코드를 볼 수 있을까요? –

+0

첫 번째 애플릿이 끝나고 두 번째 애플릿이 실행될 때를 알아내는 간단한 검사를 해보 시지 않겠습니까? 내가 놓친 게 있니? – biril

답변

1

처음에 볼이 떨어져 당신은 정말 setInterval을보다는 requestAnimationFrame를 사용하고 싶습니다. 애니메이션 용으로 특별히 제작되었습니다. According to paul irish ..

왜 사용해야합니까?

브라우저는 동시 애니메이션을 리플 로우 및 다시 그리기 주기로 함께 최적화하여 높은 충실도의 애니메이션을 생성 할 수 있습니다. 예제의 경우 JS 기반 애니메이션이 CSS 전환 또는 SVG SMIL과 동기화됩니다. 또한 이 아닌 탭에서 애니메이션 루프를 실행하는 경우 브라우저가 실행되지 않아 CPU, GPU, 및 메모리 사용량이 적어 배터리 수명이 훨씬 길어집니다.

Heres는 나는 당신에 대한

// all credit to paul irish on this part 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 


function growCircle() { 
    // code to make the circle bigger 
} 


function rotateCross() { 
    // code to make the cross rotate 
} 

(function animate(){ 
    requestAnimFrame(animate); 
    if (/* code to tell if the circle has finished growing */) { 
    rotateCross(); 
    } else { 
    growCircle(); 
    } 
})(); 
+1

고마워요! 이것은 아주 잘 작동합니다. 일부 리팩토링 후, 나는 animate() 함수에서 문자열 'phase'에 switch 문을 사용하고 있습니다. 혹시 궁금한 점이 있으시면 http://jsfiddle.net/SSW29/ – user1515199