JS动画的多种实现方式及原理
本文主要介绍了JS动画的三种实现方式及其原理，分别为：
1.利用setInterval控制动画位移量
这里举例说明如何通过setInterval定时器来实现匀速动画和缓慢减速动画，以及为何缓慢减速动画中为什么需要用到Math.floor和Math.ceil两个函数，具体如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>qlm007</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 10px;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 10px;
position: relative;
}
</style>
</head>
<body>
<button>匀速移动</button>
<button>减速移动</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
// 动画原理 = 盒子位置 + 步长。
// 1.闪动。 （瞬间到达）
// 2.匀速。 （每次走一样距离）
// 3.缓动。 （开始特快越走越慢，步长越来越小）
// （类似刹车，电梯停止，压缩弹簧...）
// 好处：
// 1.有非常逼真的缓动效果，实现的动画效果更细腻。
// 2.如果不清除定时器，物体永远跟着目标在移动。
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var but1 = document.getElementsByTagName("button")[0];
var but2 = document.getElementsByTagName("button")[1];
but1.onclick = function () {
animate1(box1,500);
}
but2.onclick = function () {
animate2(box2,500);
}
//匀速动画
function animate1(ele,target){
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长，那么就不能在前进了
//因为步长有正有负，所有转换成绝对值来比较
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30)
}
//缓动动画封装
function animate2(ele,target) {
clearInterval(ele.timer); //清楚历史定时器
ele.timer = setInterval(function () {
//获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理： 目标位置 = 当前位置 + 步长
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
if(ele.offsetLeft===target){
clearInterval(ele.timer);
}
//下面无需判断，因为始终Math.abs(target-ele.offsetLeft)>=Math.abs(step)
//若是匀速动画则需判断，所以上面的判断不能省略
// if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
// ele.style.left = target + "px"; //直接移动指定位置
// clearInterval(ele.timer);
// }
},30);
}
</script>
</body>
</html>
对其中一行代码的原理做出解释：
step = step>0?Math.ceil(step):Math.floor(step);
首先我们需要了解js基本语法，对于小数，运行
ele.style.left = ele.offsetLeft + step + "px"时，step会自动向下取整，比如：
如果step=0.8，向下取整为0，则会导致ele.style.left = ele.offsetLeft + ==0== + "px"，无法向target前进，从而达不到想要的动画效果，Math.floor同理。
此节可参考：https://www.jb51.net/article/146349.htm
2.利用递归思想精确控制动画时间
第一种方法无法精确控制动画到达时间，而第二种方法利用另外一种思路来实现对动画时间的控制，代码如下：
第一个代码块为原理：
//duration 是动画执行时间 isLoop是否为循环执行。
function startAnimation(duration, isLoop){
var startTime = Date.now();
requestAnimationFrame(function change(){
// 动画已经用去的时间占总时间的比值
var p = (Date.now() - startTime) / duration;
if(p >= 1.0){
if(isLoop){ // 如果是循环执行，则开启下一个循环周期。并且把开始时间改成上个周期的结束时间
startTime += duration;
p -= 1.0; //动画进度初始化
}else{
p = 1.0; //如果不是循环，则把时间进度至为 1.0 表示动画执行结束
}
}
console.log("动画已执行进度", p);
if(p < 1.0){ //如果小于1.0表示动画还诶有值完毕，继续执行动画。
requestAnimationFrame(change);
}
});
}
第二个代码块实现匀速动画
block.addEventListener("click", function(){
var self = this,
startTime = Date.now(),
distance = 600,
duration = 2000;
requestAnimationFrame(function step(){
var p = Math.min(1.0, (Date.now() - startTime) / duration);
self.style.transform = "translateX(" + (distance * p) +"px)";
if(p < 1.0) {
requestAnimationFrame(step);
}
});
});
第三给代码块实现减速动画，其中的p(2-p)表达式利用的是二次函数的特点，对其求导可研究速率的变化
block.addEventListener("click", function(){
var self = this, startTime = Date.now(),
distance = 1000, duration = 2000;
requestAnimationFrame(function step(){
var p = Math.min(1.0, (Date.now() - startTime) / duration);
self.style.transform = "translateX("
+ (distance * p * (2-p)) +"px)";
if(p < 1.0) requestAnimationFrame(step);
});
});
以上的实现有一个缺点，无法精确控制动画的偏移量，只能近似控制，若有新的idea欢迎留言
具体内容可参考：https://www.cnblogs.com/yztdd99/p/12014002.html
3.利用requestAnimationFrame实现动画（html5）
requestAnimationFrame翻译为中文是请求动画帧，此方法使用方式与setTimeout类似：requestAnimationFrame是一个全局函数。调用requestAnimationFrame后，它会要求浏览器根据自己的屏幕刷新率进行一次重绘（普通笔记本为60帧每秒），它接收一个回调函数作为参数，每次屏幕刷新时就会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。由于requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame，也就是需要用到递归。requestAnimationFrame函数会返回一个资源标识符，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调。
优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿
不通过cancelAnimationFrame来实现动画代码：
var progress = 0;
//回调函数
function render() {
progress += 1; //修改图像的位置
if (progress < 100) {
//在动画没有结束前，递归渲染
window.requestAnimationFrame(render);
}
}
//第一帧渲染
window.requestAnimationFrame(render);
通过cancelAnimationFrame来实现动画代码：
var progress = 0;
//回调函数
function render() {
progress += 1; //修改图像的位置
//在动画没有结束前，递归渲染
var window.requestAnimationFrame(render);
if (progress >=100) {
window.cancelAnimationFrame(render);
}
}
//第一帧渲染
window.requestAnimationFrame(render);
具体细节请参考：https://www.jianshu.com/p/f6d933670617