带有图标的HTML5画布粒子效应

Question

我需要帮助这个粒子的效果与图标浮动在背景和毛斯克罗尔所有的图标应该评估到下一个屏幕与动画如下所附。

​

​

​

​

有人能帮我解决这个问题吗？

Answer 1

这个快速演示将1+图像从各自的[startX, startY]动画到指定数量的动画帧上的单个[endX, endY]。

您可以通过侦听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>

​