如何选取合适的前端动效方案?

12,044 阅读4分钟

一、原因

  • 前端动画场景需求多
  • 对众多动画场景的技术实现方案选择上比较模糊
    • 各动画方案的优劣及适用场景认识模糊
  • 现有动画库太多,不知道选哪个
    • 主流动画库的适用场景认识模糊

二、分类

动画用途

  1. 展示型的动画,类似于一张GIF图,或者一段视频
  2. 交互型的动画:用户自已参与的

绘制技术

  1. Canvas
  2. div
  3. SVG

PS:为了简单也可以用视频,但除非动画的播放场景固定,不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样,容易踩不少坑。

动画类型

  1. Tween动画
  2. 序列帧动画
  3. 骨骼动画
  4. SVG动画
  5. 3D动画

维度

  1. 2D
  2. 3D

三、绘制技术的差异

不管采用什么方式来制作动画,最终呈现到前端页面的无非三种形式:canvas、div、SVG。

特点比较

  • canvas
    • 效率高、性能好、可控性高,只能处理位图,内存占用恒定
    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • SVG
    • 处理矢量图,不失真
    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
    • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
    • 不适合游戏应用
  • div
    • 包括CSS控制的DOM动画、JS控制的DOM动画
    • 比较适合简单的数量较少的复杂度较低的动画

性能差异

  • 一般情况下:JS+Canvas > CSS + DOM > JS + DOM

示例代码(直观效果)

  • canvas和svg比较:
    • 一般情况下,随着屏幕大小的增大,canvas将开始降级,因为需要绘制更多的像素。
    • 随着屏幕上的对象数目增多,SVG 将开始降级,因为我们正不断将这些对象添加到 DOM 中。
    • 这些度量不一定准确,以下方面的不同一定会引起变化:实现和平台、是否使用完全硬件加速的图形,以及 JavaScript 引擎的速度。

四、动画实现方式

前端动效开发,首先应该确定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。

虽然最终呈现动画的载体(绘制技术)就三种,但实现动画的方式却很多,得从动画类型出发讨论动画的实现方式

  • Tween。补间动画,涉及到一些缓动函数(如:常用的缓动函数
    1. CSS实现(transition、animation等)
    2. Js实现
  • 序列帧动画
    1. CSS实现(animation)
    2. JS+DOM实现
    3. JS+canvas实现
  • 骨骼动画
    1. 一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。
  • SVG动画
    1. 使用 XML 格式定义图形
    2. 可以用AI等SVG编辑工具生成SVG图片后,配合anime.js等现有库进行动画制作
  • 3D动画
    1. DOM操作用CSS 3D实现。(perspective属性等)
    2. 场景搭建用webGL(Three.js等)
    3. 3D模型动画用Blender或maya等制作完成后导出使用

上面列出的动画类型对应的实现策略,从开发角度来讲,可以:

  1. 自己实现
  2. 选择现有轮子:
    • 动画库
    • 游戏引擎、渲染引擎

自己实现

为了减少外部依赖,简单的不复杂的动画一般选择自己实现。可参考下面的实现方式选择思路:

动画库

这边尽可能的收集了网上的动画库,并对其信息进行了简单介绍,篇幅问题,另起一篇文章:可能是最全的前端动效库汇总

游戏引擎/渲染引擎

动画从维度上分,3D动画一般采用诸如Three.js的渲染引擎或者游戏引擎来实现。2D动画在某些场景也会采用引擎。

现在都有些什么游戏框架可以看这里:游戏/渲染框架导航

五、主流动画解决方案

六、主流产品动画方案

  • 网易哒哒工作室H5:序列帧动画->cavans实现
  • 各种“一镜到底”类H5:序列帧动画->canvas实现

参考文档

  1. W3school--HTML 5 Canvas vs. SVG
  2. 前端动画技术的研究和比较
  3. 阿里巴巴 前端专家金擘(渚薰) - 渐进式动画解决方案
  4. canvas和svg性能方面选择