canvas运动渐变图形（Canvas学习笔记高级动画）
缓动动画，指的是带有一定缓冲效果的动画。在动画过程中，物体在某一段时间会“渐进加速”或“渐进减速”，从而让物体运动看起来更为自然而逼真。 缓动动画分为两种，即缓入动画和缓出动画。 在Canvas中，想要实现缓动动画，一般需要以下五个步骤： （1）定义一个0~1之间的缓动系统easing。 （2）计算出物体与终点之间的距离。 （3）计算出当前速度，其中当前速度=距离*缓动系统。 （4）计算新的位置，其中新的位置=当前位置 当前速度。 （5）重复执行第2~4步，直到物体达到目标。
语法
var targetX = 任意位置;
var targetY = 任意位置;
// 动画循环
var vx = (targetX - object.x) * easing;
var vy = (targetY - object.y) * easing;
说明： targetX和targetY分别为目标的横坐标和纵坐标，easing为缓动系统，vx和vy分别为物体在x轴方向和y轴方向上的速度。
示例示例一：X轴方向上的缓动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>X轴方向上的缓动动画</title>
<script type="text/javascript" src="ball.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="200"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var ball = new Ball(0, canvas.height / 2);
// （1）定义一个0~1之间的缓动系统easing。
var easing = 0.05;
// （2）计算出物体与终点之间的距离。
var targetX = canvas.width * (3 / 4);
(function frame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// （3）计算出当前速度，其中当前速度=距离x缓动系统。
var vx = (targetX - ball.x) * easing;
// （4）计算新的位置，其中新的位置=当前位置 当前速度。
ball.x = vx;
ball.fill(ctx);
// （5）重复执行第2~4步，直到物体达到目标。
window.requestAnimationFrame(frame);
})();
};
</script>
</body>
</html>
效果图：
easing是缓动系数，在每一帧中都将物体与终点之间的距离乘以缓动系数，从而求出当前速度。随着距离的不断减小，速度也就不断减小。当系数越接近于1，小球移动得越快；当系数越接近于0，小球移动得越慢。
示例二：任意方向上的缓动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>任意方向上的缓动动画</title>
<script type="text/javascript" src="ball.js"></script>
</head>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var ball = new Ball(0, 0);
// （1）定义一个0~1之间的缓动系统easing。
var easing = 0.05;
// （2）计算出物体与终点之间的距离。
var targetX = canvas.width * (3 / 4);
var targetY = canvas.height * (3 / 4);
(function frame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// （3）计算出当前速度，其中当前速度=距离x缓动系统。
var vx = (targetX - ball.x) * easing;
var vy = (targetY - ball.y) * easing;
// （4）计算新的位置，其中新的位置=当前位置 当前速度。
ball.x = vx;
ball.y = vy;
ball.fill(ctx);
// （5）重复执行第2~4步，直到物体达到目标。
window.requestAnimationFrame(frame);
})();
};
</script>
</body>
</html>
效果图：
分析： 对于任意方向的缓动动画，我们只需要分解为x轴和y轴两个方向，然后分别进行处理。
示例三：追随鼠标的小球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>追随鼠标的小球</title>
<script type="text/javascript" src="ball.js"></script>
</head>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var target = {x: canvas.width / 2, y: canvas.height / 2};
canvas.addEventListener('mousemove', function(event) {
target = {
x: event.clientX,
y: event.clientY
}
});
var ball = new Ball(canvas.width / 2, canvas.height / 2);
var easing = 0.05;
(function frame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var vx = (target.x - ball.x) * easing;
var vy = (target.y - ball.y) * easing;
ball.x = vx;
ball.y = vy;
ball.fill(ctx);
// （5）重复执行第2~4步，直到物体达到目标。
window.requestAnimationFrame(frame);
})();
};
</script>
</body>
</html>
效果图：
在Canvas中，缓动动画不仅可以用于物体的运动，还可以应用于物体的其它各种属性，包括大小、颜色、透明度以及旋转等。 不管缓动动画应用于什么方面，其实现思路是一样的，都是如下两个步骤： （1）当前速度 = (最终值 - 当前值) * 缓动系数。 （2）新值 = 当前值 当前速度。
示例四：缓动动画应用于半径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>缓动动画应用于半径</title>
<script type="text/javascript" src="ball.js"></script>
</head>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var ball = new Ball(canvas.width / 2, canvas.height / 2);
var easing = 0.05;
var targetRadius = 100;
(function frame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var vRadius = (targetRadius - ball.radius) * easing;
ball.radius = vRadius;
ball.fill(ctx);
if (vRadius < 0.5 && vRadius > 0) {
targetRadius = 10;
}
if (vRadius < 0 && vRadius > -0.5) {
targetRadius = 100;
}
window.requestAnimationFrame(frame);
})();
};
</script>
</body>
</html>
效果图：
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
