前端动画实现浅析（前端常用动态解决方案）

我们从动画的实现方法入手，了解浏览器的渲染，以及如何提升动画的性能。

一、常见动画实现方法：

1. GIF动画

gif 文件可以存多幅彩色图像，当数据逐幅读出并展示都在屏幕上，就可以构成一个简单的动画。 场景：GIF 比较适用于色彩较少的图片，比如页面卡通 icon、标志等等。

优点： 1.制作的成本很低； 2.兼容性好； 3.方便开发使用。

缺点： 1.画质上：色彩支持少，图像毛边严重； 2.交互上：不能控制动画的播放暂停，没有灵活性； 3.大小上：由于是无损压缩，每帧被完整的保存下来，导致文件很大。

2. css3 补帧动画

1）transition 过渡动画

transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制。

transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。

场景：常与 :hover, :active 等伪类使用,实现相应等动画效果。

缺点： 在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。

2）animation 关键帧动画

animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

场景： 比如：loading 展示。

优点： 1、无需每一帧都被记录，通过关键帧设置，方便开发； 2.实现简单，通常 UI 可以直接给到 css 文件，前端只需要导入即可【移动端注意屏幕适配】。

缺点： 1.css 没法动画交互，无法得知当前动画执行阶段； 2.transition: 需要触发，无法自动播放； 3.animation 兼容性需要加前缀，导致代码量成倍增长； 4.对于复杂动画的实现，导入的 css 文件过大，影响页面的渲染树生成，从而阻塞渲染。比如实现一个摇钱树的效果，css 文件达到百 kb，就要采取一些必要的压缩手段，缩减文件大小。

3）js 逐帧动画

JS 动画的原理是通过 setTimeout 或 requestAnimationFrame 方法绘制动画帧，从而动态地改变 网页中图形的显示属性(如 DOM 样式，canvas 位图数据，SVG 对象属性等)，进而达到动画的目的。

通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

缺点：javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

3. Canvas动画

canvas作为H5新增元素，是借助Web API来实现动画的。

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

4. SVG（可伸缩矢量图形）

SVG是一种基于XML的图像格式，非常类似于HTML的工作方式。它为许多熟悉的几何形状定义了不同的元素，这些元素可以在标记中组合以产生二维图形; 同样高清的质地，矢量图不畏惧放大，体积小。

SVG动画由SVG元素内部的元素属性控制，一般通过一下几个元素控制：

• : 用于控制动画延时
• ：对属性的连续改变进行控制
• ：颜色变化，但用就能控制
• ：控制如缩放、旋转等几何变化
• ：控制SVG内元素的移动路径

优点： SVG的一大优势是含有较为丰富的动画功能，原生绘制各种图形、滤镜和动画，并且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。
缺点：元素较多且复杂的动画使用svg渲染会比较慢，而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。

5. requestAnimationFrame

 requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。通常，我们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。

6. 3D动画

DOM操作，用CSS 3D实现。（perspective属性等）

场景搭建用webGL（Three.js等）

3D模型动画用blender或maya等制作完成后导出使用。

二. 总结

动画基本上分类两类：补间动画和帧动画。

• 补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。
• 帧动画：除了开始与结束状态，开发者还可以定义中间关键帧的状态，可以制作复杂的动画。

复杂的动画是通过一个个简单的动画组合实现的。基于兼容性问题，通常在项目中，一般在

桌面端浏览器推荐使用javascript直接实现动画或SVG方式；
移动端可以考虑使用CSS3 transition、CSS3 animation、Canvas或requestAnimationFrame方式。

三. 一些常用动画库

Animate.css

Anime.js

Magic.css

Velocity.js

move.js

Waves

vue：vue-kinesis、vue-prix、vue-fake3D-image、v-wave、vue-animate-onscroll