canvas-动画原理，用ps做过动画的会觉得超简单。

此文章是由张鑫旭大神那里借鉴过来的，并加了一些别的属性，当然举一反三可以做一些简单的下雨，下雪的特效了。来说些重点，大学时候喜欢摆弄ps，学了一些做gif动画的东西，看完了大神文章，更免除了我学代码以来对动画的恐惧。如果ps或者之前flash做过帧动画那么大神这个文章真的很适合你，从头看一步一步，引人入胜，看完你会爱上做动画的，并有兴趣做其他动画。

• 先上效果。
  

  circleAnimate.gif
  
  
  改为垂直的彩色泡泡也很简单.gif

• 插件 tween.js（动画插件）,可自行搜索。

• 横向效果

function Ball() {
    this.r=Math.floor(Math.random()*10)+10;
    this.x=0;
    this.y=200;
    this.frameX=Math.floor(Math.random()*50);
    this.color=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*100)})`;
    this.targetX=Math.floor(Math.random()*50+350);
    this.totalFrame=Math.floor(Math.random()*50+50);
    this.aniEffect=Math.floor(Math.random()*3);
}
Ball.effectArr=['easeIn','easeOut','easeInOut'];
/*
* 每次走完均改变颜色
*
* */
Ball.prototype.changeColor= function () {
    this.color=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*100)})`;
}

/*
* 根据位置画圆圈
*
* */

Ball.prototype.draw=function () {

    //t:初始运动帧数（变化）
    //b:开始帧数的位置 （无变化）
    //c:目标运动位置（无变化）
    //d:总帧数 （不变）
    this.x=Tween.Circ[Ball.effectArr[this.aniEffect]](this.frameX,this.r,this.targetX,this.totalFrame);
    ctx.beginPath();
    ctx.fillStyle=this.color;
    ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
    ctx.fill();
};


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var ballArr=[];

for(var i=0;i<6;i++){
    ballArr.push(new Ball());
}

var ballAni=setInterval(function () {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(!ballArr.length){
        return;
    }
    for(var k=0;k<ballArr.length;k++){
        ballArr[k].draw();
        if(ballArr[k].x>=ballArr[k].targetX){
            ballArr[k].frameX=0;
            ballArr[k].changeColor();
        }else{
            ballArr[k].frameX++;
        }
    }

},30);

• 纵向效果

function Ball() {
    this.r=Math.floor(Math.random()*10)+10;
    this.x=Math.floor(Math.random()*(400-this.r));
    this.y=0;
    this.frameY=Math.floor(Math.random()*50);
    this.color=`rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*200)},${Math.random().toFixed(1)})`;
    this.targetY=400+this.r*2;
    console.log(this.targetY);
    this.totalFrame=Math.floor(Math.random()*80+50);
    this.aniEffect=Math.floor(Math.random()*3);
}
Ball.effectArr=['easeIn','easeOut','easeInOut'];
/*
* 每次走完均改变颜色
*
* */
Ball.prototype.changeColor= function () {
    this.color=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*200)},${Math.random().toFixed(1)})`;
}

/*
* 根据位置画圆圈
*
* */

Ball.prototype.draw=function () {

    //t:初始运动帧数（变化）
    //b:开始帧数的位置 （无变化）
    //c:目标运动位置（无变化）
    //d:总帧数 （不变）
    this.y=Tween.Sine[Ball.effectArr[this.aniEffect]](this.frameY,-this.r,this.targetY,this.totalFrame);
    ctx.beginPath();
    ctx.fillStyle=this.color;
    ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
    ctx.fill();
};


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var ballArr=[];

for(var i=0;i<16;i++){
    ballArr.push(new Ball());
}

var ballAni=setInterval(function () {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(!ballArr.length){
        return;
    }
    for(var k=0;k<ballArr.length;k++){
        ballArr[k].draw();
        if(ballArr[k].frameY>=ballArr[k].totalFrame){
            ballArr[k].frameY=0;
            ballArr[k].changeColor();
        }else{
            ballArr[k].frameY++;
        }
    }

},30);