AE动效神器 Lottie，动画直接变原生代码！

李健老师

在没有 Lottie 之前，AE制作出来动效图，开发转换成程序。一般都是通过给 GIF序列图，或者是开发自己写程序，当然这些动画一般都是比较简单的，如果遇到复杂的动画，开发一般都会拒绝掉，理由一般都是这个没法实现，这个动画需要很多时间，就算做出来也和最终动效的效果不同。不过自从有了 Lottie，再也不用担心了，一般的动画开发都能高效快速的给你高保真还原了。



动效为何如此重要？


动效能引起用户的注意，使其感到更轻松有趣。
提供（用户操作后的）视觉（功能）反馈，并为下一步的跳转做准备。
好的动效能使用户体验感得到提升，加深好感。差的则使人迷糊，辨别不清想要的结果。



什么叫 Lottie ？


由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。





动画转换原理


以IOS为例，首先你需要通过第三方AE插件Bodymovin将你的动画导出成JSON格式的数据，然后再在IOS开发的时候使用Lottiet将JSON格式的数据转换成原生动画。


下面就举一个具体的列子来说明下如何使用Lottie。


首先我在AE里面做了这样一个动画。

第一步使用Bodymovin，将动画转换成JSON格式的。这个AE插件其实是为了将动画转成Web格式的，转好以后其实已经可以放到Web上去了。



导出的JSON文件


我们的目标是让动画在原生的环境下播放，这个时候就该Lottie出场了。
首先在你原有的iOS 项目里面加入Lottie，同时将你之前导出的JSON文件也加进去。
然后在自己的项目里import Lottie，接下来只需要创建一个LOTAnimationView就可行了，你可以简单将它理解为是一个放图片的容器，正常情况下我们使用的是一个imageView作为容器，并将设计师提供的切图放在里面。而这个LOTAnimationView里面放的则是我之前导出的动画。


let animationView = LOTAnimationView.animationNamed(“demo”)


上面的”demo”就是AE里导出的JSON文件的名字，接下来只需调用一下播放就能开始播放动画了。


animationView?.play


iOS 下运行的效果



可以看到这个动画和AE里的还是有些区别的，最后炸开的效果没有了。炸开的效果是用Repeater做的，实际上只是做了一个，其它的都是重复这一个的效果。显然Lottie并不支持Repeater。Airbnb说他们会尽量让Lottie支持更多AE里面的功能（想了解支持的AE里的功能可以看这里：https://github.com/airbnb/lottie-ios）。虽然现在并不能做到只要你能在AE里做出来的，就能转成原生动画，不过个人认为，现在支持的功能也已经非常强大了。