2022 年 Web 端主流动画实现方案

·  阅读 317
2022 年 Web 端主流动画实现方案

前言

恰到好处的动画效果能提高用户的交互意愿与留存时长……本文总结时下流行的动画方案,如有补充,择日更新。

一、动态图片

技术方案兼容性色彩表现压缩率
GIF优秀色彩表现差、不支持半透明一般
🌟APNG(推荐)Chrome 59、Safari 8优秀对于颜色信息多的图片(如照片)不能大幅压缩
🌟WEBP(推荐)Chrome 32、Safari 14优秀
AVIF仅 Chrome 95 以上优秀更好
JPEG XL都不支持!未来可期据说更优秀据说更更好

小结:前端开发成本低,但是动态图片无法交互,如需要控制播放则应该采用下面的方案。

Tips:AE 导出 Apng、WebP 格式动画插件Export webp and apng

二、帧动画

1. CSS3 实现

通过animation配置动画时间、时长以及其他动画细节和@keyframe关键帧定义动画细节样式,以达到动画效果。

  1. 设置animation-timing-function 属性为:steps(n,[ start | end ])
  2. 精灵图(可以是组合在一张大图,配合background-position;也可以分割成小图配合多个<img>标签和transform:translate()属性)

2. JS 实现

通过 JS 的setTimeoutsetIntervalrequestAnimateFrame等 API 控制动画素材替换或位移,以达到动画效果。

  1. JS API + <img> 位移 (或者background-position更新)

小结:可控制播放,开发成本一般;图片体积大,无法做到帧间压缩

三、CSS3 属性动画

改变元素自身属性,配合关键帧@keyframeanimation达到动画效果,或者配合transition实现过渡动画效果。

关键属性:width/heightposition:absolute/fixed + left/top/right/bottomtransformtransitionanimation

小结:适用于简单动画,可控制播放;开发成本和动画效果复杂成正比

Tips:推荐一些生成序列帧动画的工具,AE 插件:CSS-Sprite-Exporter、Node 库:GKA

四、SVG 动画

可以使用 CSS,JS,或者直接使用 SVG 中自带的 animate 元素添加动画

优点:矢量图,不失真

缺点:上手成本高,需要先了解 SVG 的 API

五、动画 SDK

Spine、Lottie、SVGA、VPA、PAG

  1. 彻底改变前端动画开发格局,由前端CSS书写动画改为动效设计师直接使用设计工具生成对应的动画,通过插件完成动画导出;
  2. 性能好,资源体积小,开发成本低;
  3. 前端可以通过 JS 控制动画播放,包括开始、暂停、播放片段、速率甚至动态替换文本、图片等等。

Spine

zh.esotericsoftware.com/spine-in-de… Spine 骨骼动画,适合有主体的、类似人物的动画。

优点:可控制;性能优异;三端可用

缺点:1. 多用于游戏的动画,需要引入游戏引擎cocos等 2. 研发成本比较大 3. web端只支持canvas渲染

Lottie

github.com/airbnb/lott… 使用 AE 软件制作 Lottie 动画,使用 bodymovin 导出,方便简单。

优点:1. 可控制 2. 性能不错 3. 三端可用 4. web端支持svg、canvas渲染 5. 支持二次编辑

缺点:1. AE特性支持不全面 参考 2. 粒子效果渲染不理想

SVGA

github.com/svga/SVGAPl… 优点:1. 资源包小

  1. 测试工具齐全
  2. 三端可用
  3. Protobuf 序列化结构数据格式,序列化的数据体更小,传递效率比xml,json 更高。

缺点:1. AE特性支持不全面 2. web端只支持canvas渲染 3.不支持二次编辑

VPA

github.com/Tencent/vap

  1. 支持视频 alpha 透明通道;
  2. 相比Webp, Apng动图方案,具有高压缩率(素材更小)、硬件解码(解码更快)的优点
  3. 相比Lottie,能实现更复杂的动画效果(比如粒子特效)

PAG

pag.io/

  1. AE特性支持更加全面
  2. 性能更好,功能更加强大

五、总结

  1. 动态图片开发成本低,但是动态图片无法交互;
  2. 帧动画控制性一般,开发成本一般。但图片体积和动画帧数成正比,无法做到帧间压缩;
  3. 属性动画控制性高,开发成本随动画复杂度成正比;
  4. 使用动画 SDK 可以做到动画效果的极致还原,前端开发动画成本低,可操控性非常高,素材体积低。

其他链接:

GIF vs APNG vs WebP:littlesvr.ca/apng/gif_ap… \

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改