Lottie动画全攻略：硬核还原100%页面动画效果

最近开发大屏页面碰到一个困境：动画还原。

• 照着设计动画模仿，猜测动画时长，手创建贝塞尔曲线……
• 调整细节耗时耗力，效果还差强人意…
• 好不容易实现了，还原度却达不到要求

小伙伴们是不是也有类似的经历呢?大家可以留言分享哦！

被设计师折磨一顿后，大师兄找到了解决这个困境的方案。它就是今天的主角：Lottie

Lottie简介

Lottie 是Airbnb开源的一个 面向iOS、Android、React Native 的动画库，能分析 AE 导出的动画（需要用bodymovin导出为json格式），并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

下面是Lottie提供的官方效果图。类似下面这种一段动画的播放，非常适合使用Lottie来做。

Lottie流程

我们先来看下整个流程简图。

设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。功能简单且强大。

至于Adobe Ef