一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化，比如
window.requestAnimationFrame这个api...
requestAnimationFrame官方介绍
requestAnimationFrame用处概述
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行...
官方文档对应截图
官方文档：developer.mozilla.org/zh-CN/docs/…
大致看了以后，我们可以知道:
requestAnimationFrame这个api主要是用来做动画的。
requestAnimationFrame这个api主要是用来做动画的。
requestAnimationFrame这个api主要是用来做动画的。
其实顾名思义，我们翻译这个英文单词，也能大致明白。
request(请求)Animation(动画)Frame(帧)
关于前端动画的两个问题：
1.前端动画方案有哪些？
2.为何偏偏要使用这个新的api来做动画（或者说这个api较之前做动画的方式优点有哪些）？
1.前端动画方案有哪些？
主要分类为css动画和js动画，如下细分：
css动画transition过渡动画animation直接动画（搭配@keyframes）
js动画setInterval或setTimeout定时器（比如不停地更改dom元素的位置，使其运动起来）canvas动画，搭配js中的定时器去运动起来（canvas只是一个画笔，然后我们通过定时器会使用这个画笔去画画-动画）requestAnimationFrame动画（js动画中的较好方案）
另有
svg动画标签，不过工作中这种方式是比较少的，这里不赘述
2.为何偏偏要使用这个新的api来做动画（或者说这个api较之前做动画的方式优点有哪些）？
在工作中，做动画最优的方案无疑是css动画，但是某些特定场景下，css动画无法实现我们所需要的需求，此时，我们就要考虑使用js去做动画了
canvas动画的本质也是定时器动画
使用定时器动画干活，实际上是可以的，但是存在一个最大的问题，就是动画会抖动、动画会抖动、动画会抖动，体验效果不是非常好。
而，使用requestAnimationFrame去做动画，就不会抖动、就不会抖动、就不会抖动
这里笔者写一个demo动画（分别是上述两种方式实现dom元素向右平移）给大家看一下，就知道具体的区别。我们先看一下效果图：（红色dom是定时器实现、绿色dom是requestAnimationFrame实现）
因为笔者的gif录制软件的问题，看着都有点卡，实际上，大家把下方代码复制一份跑起来看的话，会发现定时器动画在微微颤抖，而
requestAnimationFrame动画却稳如老狗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>requestAnimationFrame_yyds</title>
<style>
body {
box-sizing: border-box;
background-color: #ccc;
}
.box1,
.box2 {
position: absolute;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
color: #fff;
font-size: 13px;
}
.box1 {
top: 40px;
background: red;
}
.box2 {
top: 210px;
background: green;
}
</style>
</style>
</head>
<body>
<button class="btn">【wWW.adminJS.CN 工作生活学习必备 】
声明：本文仅供个人学习使用，来源于互联网，本文有改动，本文遵循[BY-NC-SA]协议, 如有侵犯您的权益，请联系本站，本站将在第一时间删除。谢谢你
