如何选择 ？
补间动画
「补间动画」（Tween Animation）指的是：人为设定动画的关键状态（也就是关键帧），而关键帧之间的过渡过程则由计算机处理渲染的动画处理形式。
-
CSS实现（transition、animation等） （对于
animation属性来说，使用了除steps和frames以外的时间函数（如ease、linear或cubic-bezier等） 可在 cubic-bezier.com 拖动查看三阶贝塞尔曲线的运动速率效果 案例demo理解 codepen.io/yoyochen/pe…
codepen.io/JChehe/full… -
Js实现
解决方案：
- Tween.js（提供了一些常见的缓动函数）
- Animate.css(一个跨浏览器的动效基础库，是许多基础动效的解决方案。)
2. 逐帧动画
定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。
- css: animation (使用
animation-timing-function的阶梯函数steps(number_of_steps, direction)来实现逐帧动画。) 案例demo理解 codepen.io/yoyochen/pe… - js + canvas （帧数较多或尺寸较大时，移动端可能会存在渲染性能问题，此时建议改用 Canvas 实现。推荐使用业务成熟的 Canvas 动画库，如 CreateJS、Pixi.js 等。）
- js + dom (将动画帧合并成雪碧图，放到
background-image中，通过 JavaScript 改变background-position的值来实现动画的播放。) - gif （画质低、交互不灵活等问题。）
- 其他解决方案 （SVGA，Lottie（AE制作完动画后通过Bodymovin导出使用），apng配合控制库(如：apng-js) ）
3. 3D动画
3D 变换相较 2D 变换，坐标系中多了 Z 轴，也就意味着物体除了上下左右，还可以前后移动。
（图片来源：维基百科）
- DOM操作用CSS 3D实现。（
perspective属性等） - 场景搭建用webGL(Three.js等)
- 3D模型动画用Blender或maya等制作完成后导出使用
4.SVG动画
动画库
5.性能分析及特点比较
不管采用什么方式来制作动画，最终呈现到前端页面的无非三种形式：canvas、div、SVG。
特点比较
-
canvas
- 效率高、性能好、可控性高，只能处理位图，内存占用恒定
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
-
SVG
- 处理矢量图，不失真
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
-
div
-
包括CSS控制的DOM动画、JS控制的DOM动画
-
比较适合简单的数量较少的复杂度较低的动画
性能分析
一般情况下：JS+Canvas > CSS + DOM > JS + DOM
案例分析比较: codepen.io/yoyochen/pe…
结论canvas和svg比较：
- 一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
- 随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
- 这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。
