HTML5画布粒子效果与图标

Question

我需要有关此粒子效果的帮助，图标浮动在背景上，而mousescroll所有图标应评估到下一个屏幕，并附带动画，如下所示。

任何人都可以帮我解决这个任务。

Answer 1

此快速演示可在指定数量的动画帧中为其个人[startX, startY]的个人[endX, endY]动画1 +张图像。

您可以通过侦听IE上的mousewheel事件和其他浏览器上的DOMMouseScroll事件来触发它。

快速示例代码和演示：

＆＃13;

＆＃13;

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
    });
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;