canvas缓动

通过不断地将与目标的距离和系数相乘来让物体实现远快近缓的运动。

如图所示可以做出缓动效果，具体代码如下

var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var balles=[];
var easing=0.05;
var radius=10;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.speed=speed;
}
function drawBall(){
cxt.clearRect(0,0,canvas.width,canvas.height)
for (var i=0;i<balles.length;i++) {
var b=balles[i];
cxt.beginPath();
b.x+=(canvas.width-b.radius-b.x)*easing;
cxt.arc(b.x,b.y,b.radius,0,Math.PI*2,true);
cxt.fillStyle="#fff";
cxt.fill();
cxt.closePath();
}
requestAnimationFrame(drawBall);
}
function Getrandom(min,max){
return Math.random()*(max-min)+min;
}

document.querySelector("#btn").addEventListener("click",function(){
balles.push(new Ball(radius,Getrandom(radius,canvas.height-radius),radius,{x:0,y:0}));
console.log(balles);
},false)
balles.push(new Ball(radius,radius,radius,{x:0,y:0}));
drawBall();