AE动画变原生代码：Airbnb发布开源动画库Lottie

　　欢迎各位阅读本篇文章，本篇文章讲述了AE动画变原生代码：Airbnb发布开源动画库Lottie，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。课课家教育平台提醒各位：本篇文章纯干货~因此大家一定要认真阅读本篇文章哦!

　　Airbnb 发布的 Lottie 是一个面向 iOS、Android 和 React Native 的开源动画库。

　　简单来说，就是可以直接利用 AE 导出的 JSON 动画文件，将其解析为原生代码，并跨平台运行在设备上。

　　根据身边朋友的试用，通过 Canvas 绘制动画非常非常流畅，并且在 AE 动画没有遮罩的前提下内存控制得也非常好，基本可以取代用 GIF 做动画。

　　一个 JSON 文件可以同时复用于 iOS 和 Android ，免去了动画重复开发实现，并且还原度都比较高。

　　唯独当 AE 动画大量使用遮罩时，内存管理似乎还有些 Bug。

　　名字 Lottie 好像来源于一个德国以剪辑电影出名的导演。

　　总的来说，这个动画库为跨平台低成本动画实现提供了非常有想象力的解决方案，一旦做成了对很多前端同学会有一定的冲击......毕竟以后做牛逼的动画可能就不那么稀奇了。

　　顺便，设计师们赶快去抓一抓 AE 吧，以后实现原生动画可能就没那么费劲，许多好效果也都可以慢慢搬上台面了。

　　我翻译的 Airbnb Design 博客原文如下：

　　一直以来，在 Android、iOS、React Native 上实现一套复杂动画是一件蛮困难而且耗时的事。开发者们不仅要为各种屏幕尺寸加载一大堆素材，还得写成百上千行生硬、难维护的代码。正因如此，绝大部分 App 都不愿意使用动画 —— 尽管动效对用户体验来说是一个强大的工具。为此，从一年前开始，我们就想要改变这件事。

　　一年后的今天，很高兴和向大家介绍我们的解决方案——Lottie。Lottie 是一个面向 iOS、Android、React Native 的动画库，能给实时绘制 After Effects 动画并且让原生 App 像使用静态素材一样使用这些动画。

　　通过插件 Bodymovin，Lottie 可以直接解析 AE 导出的 JSON 文件，并且插件内置的 Javascript 图层可以将动画直接在 Web 上运行。自2015年2月起，Bodymovin 的创始人 Hernan Torrisi 就一直在优化这个插件，以得到更好的功能，而我们整个团队也开始了这项不同寻常的工作。(Brandon Withrow 负责 iOS, Gabriel Peal 负责 Android, Leland Richardson 负责 React Native, 以及我负责设计和体验。)

　　Lottie 让工程师们可以轻松实现丰富的动画效果。我们所熟悉的如 Nick Butcher 的跳动进度条效果、Bartek Lipinski 的汉堡菜单栏动画、Twitter 的爱心动效就是实现动画费时费力的最好代表。而通过 Lottie，工程师可以准确地实现设计师所要的动画效果，并且使得那些与动画框架做斗争、猜测动画时间和手动重建动画曲线等等繁复的操作成为历史。

　　我们的目标就是尽可能准确地实现 AE 制作出来的动画，Lottie 提供的示例 App 将会向大家展示如何利用 AE 和 JSON 文件快速、灵活且精确地实现动效。在示例中，也提供了很多复杂动画的源文件，包括以线条为基础的动画、以字体变形为基础的动画、动态 Logo 以及多角度多切面的效果。

　　目前的 Airbnb App 中已经有不少动画是通过 Lottie 实现的，如应用内通知、全动画引导、评价页面等。接下来我们还打算在趣味性的动画上进一步拓展。

　　灵活、高效的解决方案

　　Airbnb 是一家全球化的公司，服务于数百万旅行者和房主，因此我们的动画也将运行在各种各样的设备和平台上。尽管 Marcus Eckert 的 Squall 和 Facebook 的 Keyframes 库和 Lottie 很相似，但我们各自的目标略有不同。

　　Facebook 为专注于响应式布局，只选择支持了少数 AE 动效，Lottie 则打算尽可能多的实现效果本身。Squall 的 AE 预览 App 是非常有用的工具，但它目前只支持 iOS，所以我们的工程师需要跨平台的解决方案。

　　Lottie 的 API 中集成了许多很棒的功能，让整体变得更佳高效和易用：它支持通过网络加载 JSON 文件，这对 A/B 测试方案非常有用;它有可选的缓存机制，能支持调用缓存中的动画;动画的速度、相关联的手势都可以通过简单的参数来控制;甚至 iOS 中还支持在 Runtime 中添加额外的原生 UI ，从而实现复杂的过渡动画。

　　除了目前已有的各个功能之外，未来我们还打算为 Lottie 动画增加 mapping 视图、转场视图等功能。

　　搭建社区

　　Airbnb 将 Lottie 在 GitHub 开源出来，正是希望它能成为连接开发者和设计师们的一个桥梁，让所有喜欢动画的人都加入进来。

　　9 Squares, Motion Corpse, 和 Animography 等动画交流社区的兴起让我们倍受鼓舞，它们让全世界的动画人连结到一起，即便这些人从来没有一起工作过。虽然这个过程伴随各个团队之间持续几个月的争吵，但毫无疑问，最终的成果对动画界来说价值非凡。

　　在这些人的引领下，Airbnb 接触到这三大动画社区，并将来自它们的许多动画增加到我们的示例 App 中。我们相信把这些惊艳的设计整合到 Lottie 强大的工程师社区中，将会点燃创意的火花。

　　我们非常乐意收到来自用户的反馈——无论你是设计师、动画制作者、工程师，都可以通过 lottie@airbnb.com 的邮箱和我们联系。我们也无比期待看到全世界使用 Lottie 的用户所汇聚成的团体能给创造出怎样的奇迹。

　　知识分享：PS提高效率

　　提高效率

　　1.提高占用内存资源率

　　通常情况下, Photoshop 占用内存资源的默认值是50%。也就是说, 如果一个人专心进行图像处理, 没有使用其他软件耗费内存的话, 那么他将浪费了几乎50%的内存, 而使自己陷于内存不够, 甚至内存被用完的困境而毫无觉察。其实, 只要打开“文件”下拉菜单“预置”菜单下的“内存与图像高速缓存”子菜单, 把Photoshop使用内存的百分比提高到80%- 90%, 就可以大大提高内存的利用率和工作效率。2.尽量避免同时使用其他大型软件　Photoshop 内存使用比率增高后, 应尽量避免与Photoshop 同时使用其他大型软件, 否则其他软件的运行速度将变得非常缓慢, 甚至容易引起死机。因此, 最好将占用内存资源的其他程序一律关掉。

　　2.扩展虚拟内存

　　对于普通的图像处理, 通过调整Photoshop 的内存使用比率,尽量不要同时使用其他大型软件, 就可以顺利进行操作了。但要进行大型的或复杂的Photoshop 图像处理, 计算机的内存还是显得太小, 会大大影响Photoshop 图像处理的速度。因此需要扩展虚拟内存。方法是: 打开“文件”下拉菜单“预置”菜单下的“增效工具与暂存盘”子菜单, 把计算机硬盘上的某个或某几个驱动器分别设置为第一、第二、，暂存盘, 并且将除了系统盘符之外所有暂存盘打开( Photoshop默认设置仅第一暂存盘打开) , 这样可以不影响计算机的运行速度，当常规内存被用光之后，Photoshop 会自动去使用其他暂存盘暂存盘给予系统盘更大的空间,同时使Photoshop获得更大的内存空间, 既能提高Photoshop 的处理速度, 又能最大限度地执行Photoshop 的各种复杂操作。

　　3.及时释放内存空间

　　在Photoshop 中进行图像处理时, 所有的操作( 包括复制到粘贴板、恢复、填充物、记录等) 都将记录在Photoshop 的历史记录工作板中, Photoshop 会将这些图像和数据保存在内存里, 大大占用了计算机宝贵的内存空间。因此, 要及时释放这些内存空间, 方法是: 在“编辑”下拉菜单下的“清理”子菜单中根据需要, 选择部分清除或全部清除来释放相应内存, 保证随时都有足够大的内存空间供Photoshop 顺利进行各种操作。

　　4.及时删除临时文件

　　进行图像处理时, Photoshop 会自动产生一些临时文件, 如果所处理的图像较大, 那么所产生的临时文件都很大, 假如处理一幅20MB 大小的图像, 临时文件很可能是100～150MB，这些文件存在Windows\\temp 或设置为虚拟内存的驱动器里, 将所有photoshop产生的临时文件*.tmp 全部删除, 就可以大大优化工作环境。

　　小结：相信大家阅读完毕本篇文章文章后，学到了不少知识吧?当然如果大家还想了解更多方面的详细内容的话呢，不妨关注课课家教育平台，在这里你肯定会有意想不到的收获的!