캔버스에 바운싱 박스 애니메이션 만들기

Question

캔버스 위의 특정 Y 지점에 도달 할 때마다 바운스되는 것으로 가정되는 드롭 상자 상자의 애니메이션을 만들 필요가 있습니다. 그래서 나는 상자를 떨어 뜨리는 애니메이션을 가지고 있지만 바운스 작업을 할 수는 없습니다. 여기에 내가 쓴 기능은 다음과 같습니다

function dropBox(y, width, height) { 
    var img_box = new Image(); 
    img_box.src = 'images/gift_box_small.png'; 

    var box_y_pos = y; 
    if(y==0) 
     box_y_pos = y-img_box.naturalHeight; 


    img_box.onload = function(){ 
     ctx_overlay.save(); 
     ctx_overlay.clearRect(0,0,width,height); 
     ctx_overlay.drawImage(img_box, (width/2)-(img_box.naturalWidth/2), box_y_pos); 
     ctx_overlay.restore(); 
    } 

    box_y_pos += 3; 

    var box_bottom_position = box_y_pos - img_box.naturalHeight; 

    if(box_y_pos+img_box.naturalHeight<height-25) 
     var loopTimer = setTimeout(function() {dropBox(box_y_pos, width, height)},24); 
    else 
     bounceBox(img_box, box_y_pos, box_y_pos, (height/2)-(img_box.naturalHeight/2), "up"); 

} 

function bounceBox(img, img_final_pos, y, midway_pos, direction){ 
    var midway = midway_pos; 
    var direction = direction; 
    var img_y_pos = y; 

    img.onload = function(){ 
     ctx_overlay.save(); 
     ctx_overlay.clearRect(0,0,docWidth,docHeight); 
     ctx_overlay.drawImage(img, (docWidth/2)-(img.naturalWidth/2), img_y_pos); 
     ctx_overlay.restore(); 
    } 

    for(var i = 0; i < 10; i++){ 
     if(direction=="up"){ 
      //going up 
      if(img_y_pos>midway_){ 
       img_y_pos -= 3; 
       var loopTimer = setTimeout(function() {bounceBox(img, img_final_pos, img_y_pos, midway_pos, "up")},24); 
      } else { 
       img_y_pos += 3; 
       midway = Math.floor(midway /= 2); 
       if(midway%2>0) 
        midway += 1; 
       var loopTimer = setTimeout(function() {bounceBox(img, img_final_pos, img_y_pos, midway_pos, "down")},24); 
      } 
     } else { 
      //going down 
      if(img_y_pos < img_final_pos){ 
       img_y_pos += 3; 
       var loopTimer = setTimeout(function() {bounceBox(img, img_final_pos, img_y_pos, midway_pos, "down")},24); 
      } 
     } 
    } 
} 

JSFiddle : http://jsfiddle.net/n2derqgw/3/

왜 작동하지 않으며 나는 그것이 작동하는 방법을 만들 수 있습니까?

Answer 1

두통을 피하려면 setInterval이라는 단일 함수 내에서 애니메이션을 처리하는 것이 좋습니다.
모든 애니메이션 관련 데이터를 하나의 개체에 보관하십시오.
그래서 아래의 코드는 당신이 원하지 않는 정확하게,하지만 당신은 시작해야

이

http://jsfiddle.net/n2derqgw/4/

설정 :

var canvas_overlay, ctx_overlay, docWidth, docHeight; 

var img_box = new Image(); 
img_box.src = 'http://corkeynet.com/test/images/gift_box_small.png'; 

var mustBeReadyCount = 2; // must load image and window 

img_box.onload = launchWhenReady; 
window.onload = launchWhenReady; 

var animationStep = ''; 
var boxAnimationData = { 
    animationStep: '', 
    y: 0, 
    maxY: 0, 
    bounceCount: 6, 
    direction: -1, 
    bounceHeight: 0 
}; 

function launchWhenReady() { 
    mustBeReadyCount--; 
    if (mustBeReadyCount) return; 
    docWidth = window.innerWidth; 
    docHeight = window.innerHeight; 
    canvas_overlay = document.getElementById('canvas_overlay'); 
    ctx_overlay = canvas_overlay.getContext('2d'); 
    resizeCanvas(docWidth, docHeight); 
    boxAnimationData.animationStep = 'falling'; 
    boxAnimationData.bounceHeight = docHeight/2 - img_box.height; 
    setInterval(animateBox, 30); 
}; 

더 흥미로운 코드가 여기에 있습니다 :

function animateBox() { 
    if (boxAnimationData.animationStep == 'falling') dropBox(); 
    else if (boxAnimationData.animationStep == 'bouncing') bounceBox(); 
} 

function dropBox() { 
    ctx_overlay.clearRect(0, 0, docWidth, docHeight); 
    boxAnimationData.y += 3; 
    if (boxAnimationData.y + img_box.height > docHeight) { 
     boxAnimationData.animationStep = 'bouncing'; 
    } 
    ctx_overlay.drawImage(img_box, (docWidth/2) - (img_box.width/2), boxAnimationData.y); 
} 


function bounceBox() { 
    ctx_overlay.clearRect(0, 0, docWidth, docHeight); 
    boxAnimationData.y += boxAnimationData.direction * 3; 
    if (boxAnimationData.y + img_box.height > docHeight) { 
     // reached floor ? swap direction 
     boxAnimationData.direction *= -1; 
     // and reduce jump height 
     boxAnimationData.bounceHeight *= 3/2; 
     boxAnimationData.bounceCount--; 
     if (!boxAnimationData.bounceCount) boxAnimationData.animationStep = ''; 

    } else if (boxAnimationData.y < boxAnimationData.bounceHeight) { 
     boxAnimationData.direction *= -1; 
    } 
    ctx_overlay.drawImage(img_box, (docWidth/2) - (img_box.width/2), boxAnimationData.y); 
}