用APP实现AE里的动效

软件介绍Airbnb 在今年 2月发布一款造福软件业的应用程式动画工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的动画文件库，帮助开发者更容易在原生应用程式中加上动画。

解决问题过去我们在 iOS 、Android 中制作一些复杂的动画时，都无法避免在工程师与设计师来回沟通之间花上大把时间，而且制作上也有一定难度。
至于这种种做不出来的原因里，一大部分原因是动效真的很难写。为了写个动效，用上几百行代码也是常有的事。如果你还不说清楚动效的具体原理，直接扔个视频给工程师，让他看着办。那么就是写出来了，十有八九也不是你想要的效果。弄到最后只能用GIF，而GIF对使用的场景又有着极大的限制。
至此Airbnb团队在一年前决定要在这方面做一次大改变，Lottie 应运而生。

[size=1.2em]Airbnb是这么介绍Lottie的：

[size=1.2em]Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

[size=1.2em]大概意思就是说它是一个第三方library，可以实时渲染After Effect里做出来的动画，用起来就像调用切图一样方便。这里可能会有一个误区，它并不是直接将AE里的动画转换成iOS或者Android的代码，然后工程师直接复制进去就可以了。

[size=1.2em]简单来说就是有了 Lottie ，设计师在 After Effects 设计完动画后，只需透过After Effects的扩充套件 Bodymovin 将动画转成 JSON 档，再使用 Lottie 渲染JSON档，不用重写程式、便可以直接将动画套用於应用程式中。

[size=1.2em]由于输出使用的动画档为 JSON 格式，Lottie大幅降低档案大小，在应用程式中使用更有弹性，还可以解决过去利用 GIF 或PNG 多张序列图档製作动画的缺点，如档案过大、解析度限制无法弹性缩放等，而且还可以支援 iOS 、 Android 及 React Native ，大幅减少工程师及设计师制作动画的时间。

[size=1.2em]Airbnb 希望透过 Lottie ，让在不同系统的应用程式中套用动画就像用静态图档一样简单。

动画转换原理

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

[size=1.2em]下面就举一个具体的列子来说明下如何使用Lottie。

[size=1.2em]首先我在AE里面做了这样一个动画。

[size=1.2em]

第一步使用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

结  语可以看到这个动画和AE里的有些区别，最后炸开的效果没有了。炸开的效果我是用Repeater做的，实际上只是做了一个，其它的都是重复这一个的效果。
虽然现在并不能做到只要你能在AE里做出来的，就能转成原生动画，不过个人认为，现在支持的功能也够用了。
（PS：想了解更多的实用软件么，请关注我们哟~）