几种常用动画库的对比
不管我们最终用哪个库，都必须深入源码了解其程序设计，否则后面会有很多限制。
常用动画库对比
GSAP(Green Sock Animation Platform)
https://github.com/greensock/GSAP
Github星级：13.2K
优势：速度快(官网说比jQuery快20倍)，有工具可以加速开发(GSDevTools)，基于时间线的设计；插件非常多；方便和其他库(比如Three.js和Pixi.js)搭配使用；支持形变动画(morphSVG)；浏览器兼容性最佳；背后有强大的社区和基金支持
弊端：学习成本略高？
介绍文章：https://zhuanlan.zhihu.com/p/145332205
GSAP3.0 Crash Course：https://www.youtube.com/watch?v=YqOhQWbouCE
大小：默认版本，压缩后的63KB
lottie
Github星级：25.7K(Web端)
优势：
弊端：不同的端得用不同的库
定位：重现由AE(Adobe After Effects)实现的动画
Anime
Github星级：40.8K
优势：
弊端：
Pixi.js
https://github.com/pixijs/pixijs
Github星级：34.6K
优势：
弊端：
P5.js
Github星级：16.3K
优势：
弊端：
定位：似乎做数据看板、图表比较多
比如这个网页上的数学动画，就是用P5.js画的，非常惊艳！可以用Chrome的Save All Resources插件下载源码看下。
总结
和Lottie的亲和度。
动画的分类
感觉和做可视化组件库类似，我们得有个数据结构的抽象设计，比如Element->Shape->Group这种。
元素动画
转场动画
路径动画
情感动画
在早些时候，我们介绍了实验室在数据可视化情感设计方面的研究，简而言之针对在可视化叙事中常见的五种正面情感，joy, ammusment，surprise, tenderness, excitement, 设计了一个能够展现这五种情感的动态可视化图表库，称之为 Kinetchart。相关的设计方案被公开在 https://kineticharts.idvxlab.com/ 之上，读者可以扫描如下二维码进行浏览：
注意事项
组件一定要符合短视频平台的规范
我们要做到每个组件一旦做出来，马上就可以无缝接入短视频平台。
短视频平台如果暂时还原度不够，没关系，我们可以后面持续优化。
一定要和项目解耦
选择动画库，一定一定要封装一层Adapter，和项目解耦。
这样如果后面发现之前选择的动画库有问题，需要更换为其他库，就比较好解耦了。
这种概率还是比较高的，比后端切换底层存的概率储高得多。
原子化动画
每一个动画都必须具备原子性，不依赖其他内容，这样才能做到高复用。
我们可以设计一个插件机制，每个动画定义为一个插件，用组合的方式进行使用。
参考资料
常用动画库的对比：
https://www.saashub.com/compare-gsap-vs-lottie-by-airbnb
从GSAP和其他几种常用库的对比来看，在动画方面，GSAP基本上都打败或者持平对手。
AE与lottie结合：