知识点
缓动公式：起始值 += （结束值 - 起始值）* 缓动系数
起始值 += （结束值 - 起始值）* 缓动系数
缓动系数取值范围为（0, 1）一般取0.2
缓动系数越大，刚开始的步长就越大
相比于匀速运动，只是多了一个缓动公式。
调用自己封装的函数myTools
运行效果
不以匀速移动，先快后买移动。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 90px;
height: 90px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script src="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load',function (evt) {
// 1. 定义变量
var intervalID = null, begin = 0, target = 800;
// 2. 定义动画
// 缓动公式 ： 起始值 += （结束值 - 起始值）* 缓动系数
myTools.$('btn').addEventListener('click',function (ev) {
// 2.1 清除定时器
clearInterval(intervalID);
// 2.2 绑定定时器
intervalID = setInterval(function () {
begin += (target - begin) * 0.2;
// 判断
if(Math.round(begin) >= target){
begin = target;
clearInterval(intervalID);
}
// 动起来
myTools.$('box').style.marginLeft = begin + 'px';
}, 50)
})
})
</script>
</body>
</html>
