HTML5 캔버스 입자 효과 아이콘으로

Question

배경에 떠있는 아이콘과 mousescroll로이 입자 효과에 대한 도움이 필요합니다. 모든 아이콘은 아래에 첨부 된대로 애니메이션으로 다음 화면으로 평가해야합니다.

아무도 날이 작업을 해결하는 데 도움이 될 것입니다 수 있습니다.

Answer 1

이 빠른 데모는 특정 숫자의 애니메이션 프레임에 대해 [startX, startY] 개에서 [endX, endY] 개까지의 1 개 이상의 이미지를 애니메이션 처리합니다.

IE에서는 mousewheel 이벤트를 수신하고 다른 브라우저에서는 DOMMouseScroll 이벤트를 수신하여 트리거 할 수 있습니다.

빠른 예제 코드와 데모 :

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var images=[]; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/shipSmall.jpg"; 
 
function start(){ 
 
    images.push(defineImageAnimation(img,20,20,200,100,60*2)); 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function animate(time){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    var stillAnimating=false; 
 
    for(var i=0;i<images.length;i++){ 
 
     var img=images[i]; 
 
     if(img.durationCountdown>0){ 
 
      img.x+=img.dx; 
 
      img.y+=img.dy; 
 
      img.durationCountdown--; 
 
      stillAnimating=true; 
 
     }else{ 
 
      img.x=img.endX; 
 
      img.y=img.endY; 
 
     } 
 
     ctx.drawImage(img.image,img.x,img.y); 
 
    } 
 
    if(stillAnimating){ 
 
     requestAnimationFrame(animate); 
 
    } 
 
} 
 

 
// duration is expressed as how many requestAnimationFrame loops it 
 
//  should take the animation to complete. Loops occur about every 
 
//  1/60th of a second 
 
function defineImageAnimation(img,startX,startY,endX,endY,duration){ 
 
    return({ 
 
     image:img, 
 
     x:startX, y:startY, 
 
     endX:endX, endY:endY, 
 
     dx:(endX-startX)/duration, 
 
     dy:(endY-startY)/duration, 
 
     durationCountdown:duration 
 
    }); 
 
}

body{ background-color:white; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>