CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasjquery-animate
rockey dsouza
rockey dsouza

Reputation: 84

HTML5 Canvas Particle Effect with icons

I need help for this particle effect with icons floating on background and on mousescroll all the icons should evaluate to next screen with animation as attached below.

First Screen

Second Screen

can anybody will help me to solve this task.

Upvotes: 1

Views: 994

Answers (1)

markE
markE

Reputation: 105015

This quick demo animates 1+ images from their individual [startX, startY] to their individual [endX, endY] over a specified number of animation frames.

You can trigger it by listening for mousewheel events on IE and DOMMouseScroll events on other browsers.

Quick example code and a Demo: 

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>

Upvotes: 1

Related Questions