黑马程序员技术交流社区

标题: 【上海校区】如何选取合适的前端动效方案？ [打印本页]

---

作者: LittlePrince    时间: 2019-4-25 14:46
标题: 【上海校区】如何选取合适的前端动效方案？
一、原因

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

二、分类动画用途

• 展示型的动画，类似于一张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.im/post/5cc08848e51d456e7618a6ee

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2