Canvas学习笔记——缓动

当你驾车在高速公路上行驶时，速度是很快的，而快到收费站时，则开始减速直到停下。将这个例子转换成物理模型就是当物体向终点运动时，开始速度会很快，而在快要到达终点时，速度会逐渐放缓直至0，整个运动过程就是缓动。距离越远，速度就越大，距离越近，速度就越慢，也就是距离和速度是成正比关系的。

如果t为1，则

也就是速度等于距离乘以一个0到1的小数。

v = (target - currentPosition) * k;     //  k(0,1]

 

// > 16 & 0xff,
g = color >> 8 & 0xff,
b = color >> 0xff,
a = (alpha 1) ? 1 : alpha);

if(a === 1) {
return 'rgb('+r+','+g+','+b+')';
} else {
return 'rgba('+r+','+g+','+b+','+a+')';
}
};

window.utils.parseColor = function (color, toNumber) {
if (toNumber === true) {
if (typeof color === 'number') {
return (color | 0); //chop off decimal
}
if (typeof color === 'string' && color[0] === '#') {
color = color.slice(1);
}
return window.parseInt(color, 16);
} else {
if (typeof color === 'number') {
color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
}
return color;
}
};

window.utils.containsPoint = function (rect, x, y) {
return !(x rect.x + rect.width ||
y rect.y + rect.height);
};

window.utils.intersects = function (rectA, rectB) {
return !(rectA.x + rectA.width 0) {
ctx.stroke();
}
ctx.restore();
};

Ball.prototype.getBounds = function () {
return {
x: this.x - this.radius,
y: this.y - this.radius,
width: this.radius * 2,
height: this.radius * 2
};
};

function Ship () {
this.x = 0;
this.y = 0;
this.width = 25;
this.height = 20;
this.rotation = 0;
this.showFlame = false;
}

Ship.prototype.draw = function (ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);

ctx.lineWidth = 1;
ctx.strokeStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(-10, 10);
ctx.lineTo(-5, 0);
ctx.lineTo(-10, -10);
//ctx.lineTo(10, 0);
ctx.closePath();
ctx.stroke();

if (this.showFlame) {
ctx.beginPath();
ctx.moveTo(-7.5, -5);
ctx.lineTo(-15, 0);
ctx.lineTo(-7.5, 5);
ctx.stroke();
}
ctx.restore();
};

(function() {
var canvas = document.createElement('canvas'),
a = document.getElementById('a');
canvas.id = 'c1';
canvas.width = 500;
canvas.height = 500;

a.appendChild(canvas);

var canvas = document.getElementById('c1'),
ctx = canvas.getContext('2d');

var ball = new Ball(),
vx = 0,
vy = 0,
easing = 0.05,
requestId,
targetX = canvas.width / 2,
targetY = canvas.height / 2;

(function() {
requestId = window.requestAnimFrame(arguments.callee,canvas);
ctx.clearRect(0,0,canvas.width,canvas.height);

vx = (targetX - ball.x) * easing;
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;

if(Math.abs(targetX - ball.x)

然而这样物体是永远无法到达目标点的，因为存在很多小数，所以不能达到target === x。为了解决这个问题，需要加上一段限制避免冗余的运算：

if(Math.abs(targetX - ball.x) < 0.1 && Math.abs(targetY - ball.y) < 0.1) {
        ball.x = targetX;
        ball.y = targetY;
        window.cancelRequestAnimationFrame(requestId);
}