仿抖音小球重新整理進度條（兩個小球轉動），程式碼很簡單
阿新 • • 發佈：2021-02-12
技術標籤：javascriptcanvasjavascriptcanvas
先看看效果
另外一種效果
實現思路
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>