Let's see the effect first

Another effect

Realization idea

1. Draw two balls

2. Let the center of the ball on the left X increase , Center of right ball X Decrease in , Turn around when you get to a certain position （ The third 1 Three effects ）

Let's have two balls, one scale increase , One scale reduce , When it reaches a certain range, it reverses （ The third 2 Three effects ）

The constructor that creates the ball
// Constructors function Ball(o){ this.x=0,// center of a circle X coordinate this.y=0,// center of a circle Y coordinate this.r=0,// radius
this.startAngle=0,// Starting angle this.endAngle=0,// End angle
this.anticlockwise=false;// Clockwise , Counter clockwise assignment this.stroke=false;// Stroke or not
this.fill=false;// Is it filled this.scaleX=1;// zoom X proportion this.scaleY=1;// zoom Y proportion
this.init(o); } // initialization Ball.prototype.init=function(o){ for(var key in o){
this[key]=o[key]; } } // draw Ball.prototype.render=function(context){ var
ctx=context; ctx.save(); ctx.beginPath();
ctx.translate(this.x,this.y);// Set the position of the origin
ctx.scale(this.scaleX,this.scaleY);// Set zoom
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);// Draw a circle if(this.lineWidth){// line width
ctx.lineWidth=this.lineWidth; } if(this.fill){// Is it filled
this.fillStyle?(ctx.fillStyle=this.fillStyle):null; ctx.fill(); }
if(this.stroke){// Stroke or not
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); return this; }
generate 2 It's a little ball , and render Rendering
var ctx = canvas.getContext('2d'); // Create a ball 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);
Here's the effect ：

Add animation function （ The first rotation effect ）
var a=1.04;// acceleration var dir=1;// direction var dis=1;//X Initial value of axis movement move=function(){ // Clean up canvas
ctx.clearRect(0,0,W,H); // The movement value is calculated by acceleration dis *= a; // change x Axis position ball1.x+=dir*dis;
ball2.x-=dir*dis; // Calculate scaling 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); // After reaching the designated position if(ball1.x>=22 ||
ball2.x>=22 || ball1.x<=10 || ball2.x<=10){ // Set scale ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY; ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY; // reduction X Initial value of axis movement dis=1; // Change movement direction dir=-dir; } // draw
if(dir>0){// When the direction is different , The drawing order of the ball should be changed , Moving simulated rotation ball2.render(ctx); ball1.render(ctx);
}else{ ball1.render(ctx); ball2.render(ctx); } }
Join the second 2 Three animation functions
move=function(){ // Clean up canvas ctx.clearRect(0,0,W,H); // to update
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); // Change the direction when the specified scale is reached , To make the ball bigger and smaller
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){ dir=-dir; } // draw ball1.render(ctx);
ball2.render(ctx); }
After encapsulation, the complete code is as follows ：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK"> <title></title>
onclick='start()'> start </button> <button onclick='stop()'> end </button> <div
id='process'> </div> <script type="text/javascript"> var timmer=null; function
start(){ if(timmer) return ;// Prevent repeated clicks var process =
document.getElementById('canvasDiv'); process.style.display="block";
timmer=setInterval(move,50);// Start the mission } function stop(){ var process =
document.getElementById('canvasDiv'); process.style.display="none";
clearInterval(timmer); // End the mission timmer=null; } // Constructors function Ball(o){
this.x=0,// center of a circle X coordinate this.y=0,// center of a circle Y coordinate this.r=0,// radius this.startAngle=0,// Starting angle
this.endAngle=0,// End angle this.anticlockwise=false;// Clockwise , Counter clockwise assignment
this.stroke=false;// Stroke or not this.fill=false;// Is it filled this.scaleX=1;// zoom X proportion
this.scaleY=1;// zoom Y proportion this.init(o); } // initialization Ball.prototype.init=function(o){
for(var key in o){ this[key]=o[key]; } } // draw
Ball.prototype.render=function(context){ var ctx=context; ctx.save();
ctx.beginPath(); ctx.translate(this.x,this.y);// Set the position of the origin
ctx.scale(this.scaleX,this.scaleY);// Set zoom
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);// Draw a circle if(this.lineWidth){// line width
ctx.lineWidth=this.lineWidth; } if(this.fill){// Is it filled
this.fillStyle?(ctx.fillStyle=this.fillStyle):null; ctx.fill(); }
if(this.stroke){// Stroke or not
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); return this; } function computedScale(dir,dis,val){// Calculate scaling 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'); // Create a ball 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;// acceleration var dir=1;// direction
var dis=1;//X Initial value of axis movement move=function(){ // Clean up canvas ctx.clearRect(0,0,W,H);
// The movement value is calculated by acceleration dis *= a; // change x Axis position ball1.x+=dir*dis; ball2.x-=dir*dis; // Calculate scaling
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); // After reaching the designated position if(ball1.x>=22 ||
ball2.x>=22 || ball1.x<=10 || ball2.x<=10){ // Set scale ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY; ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY; // reduction X Initial value of axis movement dis=1; // Change movement direction dir=-dir; } // draw
if(dir>0){// When the direction is different , The drawing order of the ball should be changed , Moving simulated rotation ball2.render(ctx); ball1.render(ctx);
}else{ ball1.render(ctx); ball2.render(ctx); } } /* move=function(){ // Clean up canvas
ctx.clearRect(0,0,W,H); // to update 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); // Change the direction when the specified scale is reached , To make the ball bigger and smaller
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){ dir=-dir; } // draw ball1.render(ctx);
ball2.render(ctx); } */ } </script> </body> </html>
Let's give it a third company , thank you !

Technology
Daily Recommendation