动画基本上分类两类：补间动画和帧动画。javascript
一般在前端中，实现动画的方案主要有6种：css
其主要思想是经过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#rect {
width: 200px;
height: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div id="rect"></div>
<script>
let elem = document.getElementById('rect');
let left = 0;
let timer = setInterval(function(){
if(left<window.innerWidth-200){
elem.style.marginLeft = left+'px';
left ++;
}else {
clearInterval(timer);
}
},16);
</script>
</body>
</html>
Jquery的animate()方法就是这种方式实现的。前端
javascript 实现动画一般会致使页面频繁性重排重绘，消耗性能，通常应该在桌面端浏览器。在移动端上使用会有明显的卡顿。java
上面例子中，咱们设置的setInterval时间间隔是16ms。通常认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，可是通常可仍为该动画是流畅的。
在不少移动端动画性能优化时，通常使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。经过这种方式减小持续事件的触发频率，能够大大提高动画的流畅性。web
SVG动画由SVG元素内部的元素属性控制，通常经过一下几个元素控制：canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width="">
<set attributeName="x" attributeType="XML" to="100" begin="4s"/>
<animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300"/>
<animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="0"/>
<animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" />
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" />
</rect>
</svg>
</body>
</html>
这里推荐一个在sublime text3中使用svg提示插件：svg snippet。浏览器
SVG的一大优点是含有较为丰富的动画功能，原生绘制各类图形、滤镜和动画，而且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。
可是，另外一方面元素较多且复杂的动画使用svg渲染会比较慢，并且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。性能优化
transition是过分动画。可是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是立刻改变。dom
在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。因此咱们一般添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。
animation 算是真正意义上的CSS3动画。经过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。并且关键帧状态的控制是经过百分比来控制的。
CSS3最大的优点是摆脱了js的控制，而且能利用硬件加速以及实现复杂动画效果。
canvas做为H5新增元素，是借助Web API来实现动画的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="550"></canvas>
<script type="text/javascript">
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let left = 0;
let timer = setInterval(function(){
ctx.clearRect(0,0,700,550);
ctx.beginPath();
ctx.fillStyle = "#ccc";
ctx.fillRect(left,0,100,100);
ctx.stroke();
if(left>700){
clearInterval(timer);
}
left += 1;
},16);
</script>
</body>
</html>
注释：经过getContext()获取元素的绘制对象，经过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。
Canvas主要优点是能够应对页面中多个动画元素渲染较慢的状况，彻底经过javascript来渲染控制动画的执行。可用于实现较复杂动画。
requestAnimationFrame是另外一种Web API，原理与setTimeout和setInterval相似，都是经过javascript持续循环的方法调用来触发动画动做。可是requestAnimationFrame是浏览器针对动画专门优化造成的APi，在性能上比另二者要好。
前面提到，大多数显示器的刷新频率是60Hz，大概至关于每秒钟重绘60次。大多数浏览器都会对重绘操做加以限制，不超过显示器的重绘频率，由于即便超过这个频率用户体验也不会提高。
所以，最平滑动画的最佳循环间隔是 1000ms/60 ，约16ms。这个循环间隔重绘的动画是最平滑的，由于这个速度最接近浏览器的最高限速。
一般，咱们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="rect"></div>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
let elem = document.getElementById("rect");
let left = 0;
//自动执行持续性回调
requestAnimationFrame(step);
//持续该改变元素位置
function step() {
if(left<window.innerWidth-200){
left+=1;
elem.style.marginLeft = left+"px";
requestAnimationFrame(step);
}
}
</script>
</body>
</html>
咱们注意到，requestAnimationFrame只是将回调的方法传入到自身的参数中执行，而不是经过setInterval调用。你要知道，不管是setInterval()仍是setTimeout()都不十分精确。为它们传入的第二个参数，实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行时间。若是队列前面已经加入其余任务，那动画代码就要等前面的任务完成后再执行。
复杂的动画是经过一个个简单的动画组合实现的。基于兼容性问题，一般在项目中，通常在