简述：
缓冲动画是一个物体从滑动到某个目标就停下来。缓冲动画是指带有一定减速效果（可以直接理解某个属性值变化量慢慢的变小，直到物体达到目标值“这个变化值”为0，加速度从大到小）
实现缓冲动画需要牢记一下几个步骤：
1。给出物体与终点的距离（属性和目标值的差距）
2.定义一个0！1的缓动系数easing
3.计算出当前的速度，其中当前的速度=距离X缓动系数
4.计算新的位置，其中新的位置=当前位置+当前速度
重新执行2~4步，知道物体达到目标
语法：
var tarx=任意位置；
var tary=任意位置；
//动画循环
var vx=(targetX - obj.x)*easing;//距离目标越近越小
var vy=(targetY-obj.y)*easing;
//targetX和targetY分别是目标的横坐标和Y坐标。vx和vy分别是物体X，y方向的速度简单的缓存动画在线demo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(0, cnv.height / 2);
//定义终点的X轴坐标
var targetX = cnv.width * (3 / 4);
//定义缓动系数
var easing = 0.05;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var vx = (targetX - ball.x) * easing;
ball.x += vx;
ball.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
缓动动画和摩擦力动画极度相似，都是速度逐步减少最终停止。不过有着明显的区别是：
1.摩擦力动画中每一帧中，速度都是上一帧速度X摩擦摩擦系数，其中速度是固定不变的比例改变的
2.缓动动画，每一帧的速度等于距离X缓动习俗，其中的速度不是按照比例改变的
一个小球追着鼠标demo：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(cnv.width / 2, cnv.height / 2, 15, "#FF6699");
var mouse = tools.getMouse(cnv);
var easing = 0.05;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var vx = (mouse.x - ball.x) * easing;
var vy = (mouse.y - ball.y) * easing;
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
两个小球追逐鼠标在线demo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var bigBall = new Ball(cnv.width / 2, cnv.height / 2, 15, "# FF6699");
var smallBall = new Ball(cnv.width / 2, cnv.height / 2, 12, "#66CCFF");
var mouse = tools.getMouse(cnv);
var easing = 0.05;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//第1个小球跟随鼠标移动
var vx1 = (mouse.x - bigBall.x) * easing;
var vy1 = (mouse.y - bigBall.y) * easing;
bigBall.x += vx1;
bigBall.y += vy1;
bigBall.fill(cxt);
//第2个小球跟随第1个小球移动
var vx2 = (bigBall.x - smallBall.x) * easing;
var vy2 = (bigBall.y - smallBall.y) * easing;
smallBall.x += vx2;
smallBall.y += vy2;
smallBall.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
缓存动画用于修改物体大小，颜色，在线demo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2);
var targetRadius = 36;
var easing = 0.05;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var vRadius = (targetRadius - ball.radius) * easing;
ball.radius += vRadius;
ball.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
修改颜色：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(cnv.width / 2, cnv.height / 2, 30, "rgba(255,102,153,1.0)");
var opacity = 1.0;
var targetOpacity = 0.0;
var easing = 0.05;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var v = (targetOpacity - opacity) * easing;
opacity += v;
ball.color = "rgba(255,102,153," + opacity + ")";
ball.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>