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>
<style> *{ margin: 0; padding: 0; } </style> </head> <body> <button
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
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element