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

524 阅读4分钟
一、原因
  • 前端动画场景需求多
  • 对众多动画场景的技术实现方案选择上比较模糊
    • 各动画方案的优劣及适用场景认识模糊
  • 现有动画库太多,不知道选哪个
    • 主流动画库的适用场景认识模糊
二、分类动画用途
  • 展示型的动画,类似于一张GIF图,或者一段视频
  • 交互型的动画:用户自已参与的
绘制技术
  • Canvas
  • div
  • SVG
PS:为了简单也可以用视频,但除非动画的播放场景固定,不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样,容易踩不少坑。
动画类型
  • Tween动画
  • 序列帧动画
  • 骨骼动画
  • SVG动画
  • 3D动画
维度
  • 2D
  • 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。补间动画,涉及到一些缓动函数(如:常用的缓动函数)
    • CSS实现(transition、animation等)
    • Js实现
  • 序列帧动画
    • CSS实现(animation)
    • JS+DOM实现
    • JS+canvas实现
  • 骨骼动画
    • 一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。
  • SVG动画
    • 使用 XML 格式定义图形
    • 可以用AI等SVG编辑工具生成SVG图片后,配合anime.js等现有库进行动画制作
  • 3D动画
    • DOM操作用CSS 3D实现。(perspective属性等)
    • 场景搭建用webGL(Three.js等)
    • 3D模型动画用Blender或maya等制作完成后导出使用
上面列出的动画类型对应的实现策略,从开发角度来讲,可以:
  • 自己实现
  • 选择现有轮子:
    • 动画库
    • 游戏引擎、渲染引擎
自己实现为了减少外部依赖,简单的不复杂的动画一般选择自己实现。可参考下面的实现方式选择思路:


动画库这边尽可能的收集了网上的动画库,并对其信息进行了简单介绍,篇幅问题,另起一篇文章:可能是最全的前端动效库汇总
游戏引擎/渲染引擎动画从维度上分,3D动画一般采用诸如Three.js的渲染引擎或者游戏引擎来实现。2D动画在某些场景也会采用引擎。
  • 常见游戏引擎
    • Cocos
    • Egret
    • LayaAir
    • Phaser
  • 常见渲染引擎
    • Pixi.js(2D动画渲染引擎)
    • Three.js(3D渲染引擎)
    • Babylon.js(3D渲染引擎)
现在都有些什么游戏框架可以看这里:游戏/渲染框架导航
五、主流动画解决方案
  • Tween动画

    • 比较简单,一般自己实现。
    • Tween.js(提供了一些常见的缓动函数)
    • Animate.css(一个跨浏览器的动效基础库,是许多基础动效的解决方案。)
  • 序列帧动画

    • 自己实现(CSS、JS+canvs、JS+DOM)
    • SVGA
    • Lottie(AE制作完动画后通过Bodymovin导出使用)
    • apng配合控制库(如:apng-js)
  • 骨骼动画

    • Spine
    • DragonBones
  • SVG动画

    • snap.svg
    • GSAP
    • anime.js
  • 3D动画

    • DOM操作的话自己用CSS 3D实现
    • Three.js
  • 常用动画库(适用、强大)

    • Animate.css
    • GSAP
    • anime.js
    • snap.svg
  • 常用渲染引擎:

    • Pixi.js
六、主流产品动画方案
  • 网易哒哒工作室H5:序列帧动画->cavans实现
  • 各种“一镜到底”类H5:序列帧动画->canvas实现
参考文档
  • W3school--HTML 5 Canvas vs. SVG
  • 前端动画技术的研究和比较
  • 阿里巴巴 前端专家金擘(渚薰) - 渐进式动画解决方案
  • canvas和svg性能方面选择





文章转载自链接:https://juejin.cn/post/6844903830094610446