先看看效果
另外一种效果
实现思路
1.绘制好两个小球
2.让左边小球的圆心X增加，右边小球圆心X的减少，到了一定位置再回转（第1种效果）
让两个小球一个scale增加，一个scale减少，到一定范围后反转（第2种效果）
创建小球的构造函数
//构造函数
function Ball(o){
this.x=0,//圆心X坐标
this.y=0,//圆心Y坐标
this.r=0,//半径
this.startAngle=0,//开始角度
this.endAngle=0,//结束角度
this.anticlockwise=false;//顺时针，逆时针方向指定
this.stroke=false;//是否描边
this.fill=false;//是否填充
this.scaleX=1;//缩放X比例
this.scaleY=1;//缩放Y比例
this.init(o);
}
//初始化
Ball.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
//绘制
Ball.prototype.render=function(context){
var ctx=context;
ctx.save();
ctx.beginPath();
ctx.translate(this.x,this.y);//设置原点的位置
ctx.scale(this.scaleX,this.scaleY);//设定缩放
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
if(this.lineWidth){//线宽
ctx.lineWidth=this.lineWidth;
}
if(this.fill){//是否填充
this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
ctx.fill();
}
if(this.stroke){//是否描边
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
return this;
}生成2个小球，并render渲染
var ctx = canvas.getContext('2d');
//创建小球
var xArr=[10,22];
var yArr=[10,10];
var ball1 = new Ball({
x:xArr[0],
y:yArr[0],
r:6,
startAngle:0,
endAngle:2*Math.PI,
fill:true,
fillStyle:'green',
lineWidth:1.2
}).render(ctx);
var ball2 = new Ball({
x:xArr[1],
y:yArr[1],
r:6,
startAngle:0,
endAngle:2*Math.PI,
fill:true,
fillStyle:'red',
lineWidth:1.2
}).render(ctx);此时效果是这样的：
加入动画函数（第一种旋转效果）
var a=1.04;//加速度
var dir=1;//方向
var dis=1;//X轴移动初始值
move=function(){
//清理画布
ctx.clearRect(0,0,W,H);
//通过加速度计算移动值
dis *= a;
//更改x轴位置
ball1.x+=dir*dis;
ball2.x-=dir*dis;
//计算缩放比例
ball1.scaleX=computedScale(-dir,0.005,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.005,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.005,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.005,ball2.scaleY);
//到达指定位置后
if(ball1.x>=22 || ball2.x>=22 || ball1.x<=10 || ball2.x<=10){
//设定缩放比例
ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY;
ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY;
//还原X轴移动初始值
dis=1;
//变更移动方向
dir=-dir;
}
//绘制
if(dir>0){//方向不一样时，小球的绘制顺序要交换，移模拟旋转
ball2.render(ctx);
ball1.render(ctx);
}else{
ball1.render(ctx);
ball2.render(ctx);
}
}加入第2种动画函数
move=function(){
//清理画布
ctx.clearRect(0,0,W,H);
//更新
ball1.scaleX=computedScale(-dir,0.1,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.1,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.1,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.1,ball2.scaleY);
//到达指定缩放比例后变更方向，来控制小球变大变小
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){
dir=-dir;
}
//绘制
ball1.render(ctx);
ball2.render(ctx);
}封装后完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button onclick='start()'>开始</button>
<button onclick='stop()'>结束</button>
<div id='process'>
</div>
<script type="text/javascript">
var timmer=null;
function start(){
if(timmer) return ;//防止重复点击
var process = document.getElementById('canvasDiv');
process.style.display="block";
timmer=setInterval(move,50);//开始任务
}
function stop(){
var process = document.getElementById('canvasDiv');
process.style.display="none";
clearInterval(timmer); //结束任务
timmer=null;
}
//构造函数
function Ball(o){
this.x=0,//圆心X坐标
this.y=0,//圆心Y坐标
this.r=0,//半径
this.startAngle=0,//开始角度
this.endAngle=0,//结束角度
this.anticlockwise=false;//顺时针，逆时针方向指定
this.stroke=false;//是否描边
this.fill=false;//是否填充
this.scaleX=1;//缩放X比例
this.scaleY=1;//缩放Y比例
this.init(o);
}
//初始化
Ball.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
//绘制
Ball.prototype.render=function(context){
var ctx=context;
ctx.save();
ctx.beginPath();
ctx.translate(this.x,this.y);//设置原点的位置
ctx.scale(this.scaleX,this.scaleY);//设定缩放
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
if(this.lineWidth){//线宽
ctx.lineWidth=this.lineWidth;
}
if(this.fill){//是否填充
this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
ctx.fill();
}
if(this.stroke){//是否描边
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
return this;
}
function computedScale(dir,dis,val){//计算缩放比例
var value = val*1000+dir*(dis*1000);
return value/1000;
}
createCanvas();
var move;
function createCanvas(){
var process = document.getElementById('process');
var div = document.createElement('div');
div.id="canvasDiv";
div.style.cssText="position:absolute;top:50px;left:30px;display:none;";
var canvas = document.createElement('canvas');
var W = canvas.width = 34;
var H = canvas.height = 20;
div.appendChild(canvas);
process.appendChild(div);
var ctx = canvas.getContext('2d');
//创建小球
var xArr=[10,22];
var yArr=[10,10];
var ball1 = new Ball({
x:xArr[0],
y:yArr[0],
r:6,
startAngle:0,
endAngle:2*Math.PI,
fill:true,
fillStyle:'green',
lineWidth:1.2
}).render(ctx);
var ball2 = new Ball({
x:xArr[1],
y:yArr[1],
r:6,
startAngle:0,
endAngle:2*Math.PI,
fill:true,
fillStyle:'red',
lineWidth:1.2
}).render(ctx);
var a=1.04;//加速度
var dir=1;//方向
var dis=1;//X轴移动初始值
move=function(){
//清理画布
ctx.clearRect(0,0,W,H);
//通过加速度计算移动值
dis *= a;
//更改x轴位置
ball1.x+=dir*dis;
ball2.x-=dir*dis;
//计算缩放比例
ball1.scaleX=computedScale(-dir,0.005,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.005,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.005,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.005,ball2.scaleY);
//到达指定位置后
if(ball1.x>=22 || ball2.x>=22 || ball1.x<=10 || ball2.x<=10){
//设定缩放比例
ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY;
ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY;
//还原X轴移动初始值
dis=1;
//变更移动方向
dir=-dir;
}
//绘制
if(dir>0){//方向不一样时，小球的绘制顺序要交换，移模拟旋转
ball2.render(ctx);
ball1.render(ctx);
}else{
ball1.render(ctx);
ball2.render(ctx);
}
}
/* move=function(){
//清理画布
ctx.clearRect(0,0,W,H);
//更新
ball1.scaleX=computedScale(-dir,0.1,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.1,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.1,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.1,ball2.scaleY);
//到达指定缩放比例后变更方向，来控制小球变大变小
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){
dir=-dir;
}
//绘制
ball1.render(ctx);
ball2.render(ctx);
}
*/
}
</script>
</body>
</html>