带有图标的 HTML5 画布粒子效果答案

【问题标题】：HTML5 Canvas Particle Effect with icons带有图标的 HTML5 画布粒子效果
【发布时间】：2016-08-01 07:19:00
【问题描述】：

我需要关于这种粒子效果的帮助，图标浮动在背景和鼠标滚动上，所有图标都应该评估到下一个屏幕，动画如下所示。

谁能帮我解决这个问题。

【问题讨论】：

请向我们提供一些您一直在尝试做的事情的代码。这将帮助我们帮助您！
其实我对画布动画一无所知，所以如果有的话，我会搜索相同的。如果可以的话，请帮助我提供临时代码。

标签： javascript html canvas html5-canvas jquery-animate

【解决方案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; }

&lt;canvas id="canvas" width=512 height=512&gt;&lt;/canvas&gt;

【讨论】：

感谢您的回复，但不满意。我需要很少的粒子在背景中移动，当滚动时，所有粒子都应该以一个形状聚集在一起，就像我在上面附加的 jpeg 示例一样。注意：粒子应该是任何图标。如果你能帮助我，请告诉我。
我不会为你做你的项目！ :-o 答案向您展示了如何为图像制作动画，这是您项目的复杂部分。
我不是在问整个项目，你能帮我如何制作背景图像以评估滚动形状，因为我有一些例子给你。 Demo
你已经有了你的开始（随机）和结束设计（电话）。找到每个图标的开始和结束 X,Y。然后使用答案中的代码动画到结束位置。就那么简单。同样，答案是您项目中唯一困难的部分......您需要自己编写其余部分！