此文章是由张鑫旭大神那里借鉴过来的，并加了一些别的属性，当然举一反三可以做一些简单的下雨，下雪的特效了。来说些重点，大学时候喜欢摆弄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);
