前言

在开发个人网站的过程中发现动效不理想，难以实现复杂动画（主要是因为菜），就开始探索现成的技术解决方案，于是有了该篇文章。
本来就想关注手头这个web端的，但是发现有两个较为成熟的多平台方案——Airbnb公司开源项目Lottie 和 腾讯开源的PAG。
⚠️不包含任何教程内容，单纯抒发个人见解

解决方案

前端有大致有如下的解决方案，我将其分为了俩大方向，一是以前端程序员代码实现为主，通过JS、CSS、SVG等技术；二是通过设计师相关技术为主，通过AE、Figma等技术工具。
篇幅有限，本文主要讨论第二种路线

代码导向

1. CSS 动画和 Transitions
CSS 动画更适合简单的 UI 交互动画和状态过渡
优势: 简单易学，性能良好，浏览器原生支持，无需引入额外的库。
劣势: 功能相对简单，对于复杂的动画效果，CSS 动画可能力不从心，代码量也会增加。维护复杂动画可能不如 JavaScript 库方便。
2. JavaScript 动画库 (例如：GSAP, Anime.js, Velocity.js)
按需求采用，通过引入JS库的形式，调用各种API来实现动画效果
优势: 相比 CSS 动画，JavaScript 动画库通常提供更强大的功能和更灵活的控制，可以创建更复杂的动画效果。
劣势: 需要引入额外的 JavaScript 库，可能会增加项目体积。学习曲线可能比 CSS 动画稍高。
3. SVG 动画
使用 SVG (Scalable Vector Graphics) 格式创建的动画。SVG 动画可以使用 CSS 或 JavaScript 进行控制。
优势: 矢量图形，无损缩放，文件体积小，适合制作图标动画、线条动画等。
劣势: 相对来说，SVG 动画的功能不如 Lottie.js 或 JavaScript 动画库强大，对于复杂的动画效果可能比较困难。
4. WebGL 动画库 (例如：Three.js, PixiJS)
说白了就性能最高，学习成本也极高，对于一些简单动效需求而言有点杀鸡用牛刀的感觉。
优势: WebGL 动画库可以利用 GPU 加速，实现高性能的 2D 或 3D 动画效果，适合创建更丰富、更沉浸式的用户体验。
劣势: 学习曲线较高，需要一定的图形学知识。对于简单的 UI 动画来说，可能过于重量级。

设计导向

简单提一下，后文会进行比较
1.Lottie
2.PAG
我个人认为设计导向的路线，对于复杂动效使用AE是最现实的方案，可以发挥较为直接的发挥设计师的能力，主要问题是在效率和兼容性上。

Lottie vs PAG

Airbnb家开源的Lottie，早于腾讯家的PAG | PAG动效

题外话，有点佩服国外的互联网公司，查了一下Airbnb公司主要业务是租房子，但是手下有一大把开源项目，外国开源的氛围可见一斑。

这两个技术的Github仓库都有活人在维护，issues也有人在解决，项目状况看着还好，在一两年内应该不会暴毙。
PAG应该是相对于Lottie是更加完善的方案，有大量的应用案例为保障（腾讯家国民级产品都在使用），但是我看近期issues，好像在移动端有些bug，但应该能克服。
![[Pasted image 20250212225156.png]]
这张图大致就反映二者的主要区别，具体可以看这份技术报告China LiveVideoStackCon2022 · PAG官网 | PAG动效当然这只是腾讯的一家之言，我还没有具体试验过，姑且当对，等后续我实操过后会更一篇实际体验报告

谈谈我的看法

围绕这张图来分享下我调查到的：

文件格式

PAG有自己的特殊文件格式，而Lottie其实也有叫 .lottie的标准文件。具体文件大小我没测试过，待定，但是.json文件可以通过官方的一个网站Convert Lottie JSON to dotLottie - Free Online Converter - LottieFiles转化成 .lottie，lottie官网说能压缩近1/10大小，并带来一些特有的性能提升，具体可以看Home - Lottie Docs。
也就是Lottie没腾讯说的那么不堪，PAG的特有格式带来了体积小的优势，而Lottie则可以使用更通用的JSON格式也可以转化成更高效的dotLottie格式。
俩家估计就是在争标准格式的定义权。

平台支持

PAG最新版在移动端有崩溃风险，但应该不久能解决。PAG
Lottie其实也是适配所有主流平台的，Android、Apple（ios、macOS、VisionOS、tvOS）、Web、Windows，此外还适配了React、Vue、Svelte甚至是RN，我觉得最有趣的是可以和Framer这个动画框架联动。

AE特性支持

PAG全支持，Lottie部分支持（但是基本功能够用，没那么不堪）
但这点确实是事实，Lottie也承认在不同平台有些AE功能无法适配。
这点上PAG全面胜出。

工具支持

这一点是这张图里没有提到到，工具支持主要是利好设计师。
PAG和Lottie都主要围绕adobe家的After Effect这款工具，但是除此之外Lottie的生态应该远远优于PAG。
Lottie适配Figma、Canvas…….
![[Pasted image 20250212233820.png]]
生态比PAG好了不只是一星半点，具体可以看Integrations and Plugins to Simplify Motion Design Workflow - LottieFiles太夸张了，感觉打通了整个工具流的上下游。

后记

其是讨论这么多，究竟采用哪个，我自己心里也没有定数，或许这就是技术的魅力吧，就如同React、Vue、Svelte各有各存在的理由。

主要参考资料

PAG官网 | PAG动效
Tencent/libpag: The official rendering library for PAG (Portable Animated Graphics) files that renders After Effects animations natively across multiple platforms.
LottieFiles: Download Free lightweight animations for website & apps.
Lottie
飞书中 Lottie 动画的应用本文主要介绍 Lottie 动画方案、使用方法、与 Gif 动画的性能测试对比，以及在飞 - 掘金
微信都在用的开源动效方案【PAG动效】当设计给的动画越来越复杂, 还原度要求越来越高的情况下，就需要微信都在用的开源动效 - 掘金
PAG 动效方案使用总结近几年能明显感觉到，互联网产品已经越来越离不开动效了：不管是APP里会动的加载动画UI，还是直播 - 掘金