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 的用户所汇聚成的团体能给创造出怎样的奇迹。
Lottie 官方网站（可下载 AE 插件、三大平台代码和示例）
Airbnb 官网博文
相关文章：
纹理贴图的模式设置
1 要对纹理进行任何的操作，必须先使该纹理问当前的active纹理 glGenTextures( 1, &reflectionTexObj );glBindTexture( GL_TEXTURE_2D, reflectionTexObj );glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT );glTexParameteri( GL_TEXTURE_2D, G…
人社局计算机考试报名时间,内蒙古人社局：2016年下半年计算机软件水平考试报名时间通知...
关于做好2016年度下半年计算机技术与软件专业技术资格、翻译专业资格(水平)考试笔译考试报名工作的通知各旗县区人力资源和社会保障局、市直有关单位：根据内蒙古自治区人事考试中心《关于做好2016年度下半年计算机技术与软件专业技术资格(水平)考试报名工作的通知》…
即时通讯下数据粘包、断包处理实例（基于CocoaAsyncSocket）
来源：涂耀辉 www.jianshu.com/p/2e16572c9ddc 如有好文章投稿，请点击 → 这里了解详情 前言 本文旨以实例的方式，使用CocoaAsyncSocket这个框架进行数据封包和拆包。来解决频繁的数据发送下，导致的数据粘包、以及较大数据&#x…
linux下 为自己编写的程序 添加tab自动补全 功能
linux下 为自己编写的程序 添加tab自动补全功能 入门 complete 在我的tmp下随便写了一个a.sh, 为他补全edit /etc/bash_completion.d/foo_foo() {local cur prev optsCOMPREPLY()cur"${COMP_WORDS[COMP_CWORD]}"prev"${COMP_WORDS[COMP_CWORD-1]}"opts&quo…
笔记本电脑(Windows7)实现无线AP
使用环境：出差两个同事住一个房间、网线不够用、没有路由器 1、在windows命令窗口中运行以下命令 netsh wlan set hostednetwork modeallow netsh wlan set hostednetwork ssidOPEN key1234567890 netsh wlan start hostednetwork 命令解释：在笔记本插有…
华北电力大学计算机图形学实验报告,华北电力大学计算机图形学实验报告分析.doc...
华北电力大学计算机图形学实验报告分析科 技 学 院课程设计(综合实验)报告( 2013 -- 2014 年度第 2 学期)实验名称 OpenGL基本图元绘制实验课程名称 计算机图形学||专业班级：计算机11K1 学生姓名：曲强学 号：111909010118 成 绩：指…
Fastlane 入门实战教程从打包到上传iTunes connect
有关神器 Fastlane 持续集成\部署的文章网上挺多,本文定位是入门教程,针对 iOS 应用的持续部署,只需一条命令就可实现从 Xcode 项目到 编译\打包\构建\提交审核 文章稍微有点长,涵盖内容为:fastlane 简介\安装\配置 Snapshot 截图 XCTest 一键上传App Store 说明:本文将 App…
double int char 数据类型
贴心的limits... 测试代码： #include <iostream> #include <stdio.h> #include <limits> #include <math.h> using namespace std;int main() {//double 有效数字16位double test3 1.2345678912345678e17;printf("%.17lf\n", te…
开发工具Drawscript
在Mac App Store上有一款iOS开发工具PaintCode(MAC App Store地址)。它可以通过矢量绘图来绘出你想要生成的用户控件界面，然后由PaintCode来动态生成iOS & OSX绘制代码。这样，你在drawRect函数中就只要粘贴拷贝就能生成自己想要的图案了。奈何&#…
悉尼大学计算机研究生学制,悉尼大学研究生学制
澳大利亚悉尼大学具有丰富的研究生专业课程，学制安排一般在1-2年时间。悉尼大学硕士申请要求要求非211大学申请者，暂不需清华认证 (毕业证、学位证、成绩单)入学要求：工程类专业(Engineering,IT)Master of Professional Engineering985/211学…
2016.04.09 使用Powerdesigner进行创建数据库的概念模型并转为物理模型
2016.04.09 使用Powerdesigner进行创建数据库的概念模型并转为物理模型 2016-04-09 21:10:24 本文原创受版权保护，严禁转载。 请大家不要用于商业用途,支持正版,大家都是做软件的,知道开发一套软件实属不易啊！ 今天看到了一个很有趣并且很有用的辅助…
ESTabBarController
为什么要使用? 在开发工作中，我们可能会遇到需要自定义UITabBar的情况。例如：改变文字样式、添加一些动画效果、设置一个比默认更大的样式等等，以上需求如果只通过UITabBarItem往往很难实现。 有了ESTabBarController，你可以轻松…
iPhone App开发导航条(Navigation Bar)素材PSD下载
不管是iPhone还是Android的应用App界面基本上最上方都会有个导航条（Navigation Bar）。于是我决定创建此页面整理收集所有好看的适合在iPhone App应用开发中使用的导航条素材PSD文件，并附有下载链接供需要在自己的iPhone App应用开发中需要使用…
点歌服务器工作原理,KTV点歌系统方案概述
《KTV点歌系统方案概述》由会员分享，可在线阅读，更多相关《KTV点歌系统方案概述(7页珍藏版)》请在人人文库网上搜索。1、一)目前点歌系统的主流方式目前，可以实现的KTV系统的点歌方式很多，但是可以主要归类为以下两大方式…
Xcode快捷键及代码块
2017-02-16 吴白 CocoaChina手指在键盘上飞速跳跃,终端上的代码也随着飞舞,是的这确实很酷。优秀的程序员总是这么一群人，他们不拘于现状，不固步自封，他们喜欢新奇的事，他们把自己发挥到极致。 指法攻略 放下您钟爱的鼠标吧&#…
使用logrotate管理nginx日志文件
本文转载自：http://linux008.blog.51cto.com/2837805/555829 描述：linux日志文件如果不定期清理，会填满整个磁盘。这样会很危险，因此日志管理是系统管理员日常工作之一。我们可以使用"logrotate"来管理linux日志文件&am…
c 异步中断服务器连接,异步连接和断开与epoll（Linux）
我有一个“完整”的答案在这里以防别人正在寻找这样的：#include #include ........int retVal -1;socklen_t retValLen sizeof (retVal);int status connect(socketFD, ...);if (status 0){// OK -- socket is ready for IO}else if (errno EINPROGRESS){struc…
java获取真实ip
在JSP里，获取客户端的IP地址的方法是：request.getRemoteAddr（），这种方法在大部分情况下都是有效的。但是在通过了Apache，Squid等反向代理软件就不能获取到客户端的真实IP地址了。 如果使用了反向代理软…
卡片式设计的最佳实践分享
2017-02-17 三达不留点gpj CocoaChina卡片本质上是一个简单的信息容器，信息量有限，但设计干净整洁。现如今，在保证界面具有优秀可用性的同时，卡片式的设计甚至成为了平衡界面美学的默认做法。作为最初由Pinterest和Facebook这样的…
Arduino 各种模块篇 光敏感应器 简易光敏
这一款是非常简单的光敏感应器 简单到，只对一定光强度有信号感应，输出TTL电平。 此款也是用电位器来调节的。 都是这么简单。 过段时间我为大家奉上数字版的光敏传感器。 ————————————————————————分割线———————————…
vb打开服务器excel文件路径,咨询下VB如何打开EXCEL文件并将内容显示在listbox中
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 Adodc DataGrid 控件直接连接 Excel 表格， 把 Excel 表格当成数据库。 在窗体中画出 Adodc1 和 DataGrid1 两个控件， 不做任何属性设置，只管大小和位置。 ------------------------------…
iOS动画进阶 - 手摸手教你写ShineButton动画
移动端访问不佳，请访问我的个人博客 前段时间在github上看见一个非常nice的动画效果，可惜是安卓的，想着用Swift写一个iOS版的，下下来源代码研究了一下，下面是我写代码的心路历程 先上图和demo的地址 分析动画过程 刚开…
redis自动过期
我当时设置如登陆自动过期的时间。自己找的做了下。 设置自动过期时间。 public static PooledRedisClientManager poolreds; static RedisPool() { try { poolreds new PooledRedisClientManager(10, new string[] { “101210.212.：1213” }); } catch (Exception…
Java中使用LUA脚本语言
Lua 是一个小巧的脚本语言。是巴西里约热内卢天主教大学（Pontifical Catholic University of Rio de Janeiro）里的一个研究小组，由Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo所组成并于1993年开发。简单介绍可详…
电脑显示服务器地址无法ping通,网关无法Ping通故障及解决方法
很多网络故障是常见问题，一般的三板斧方法就能解决问题，但有些故障容易让我们多走弯路，我们不妨拓宽故障排查范围，换换思路。在与网络亲密接触的过程中，我们或多或少地会遇到一些网络故障，对于许多网络故障…
VVeboTableView 源码解析
原文链接：http://www.jianshu.com/p/78027a3a2c41最近在看一些 iOS 性能优化的文章，我找到了 VVeboTableView 这个框架。严格来说这个不属于框架，而是作者用自己的方式优化 UITableView 的一个实践。 VVeboTableView 展示了各种类型的 cell&a…
人工智能第二次作业
2.9设有如下语句，请用相应的谓词公式分别把他们表示出来 (1) 有的人喜欢梅花，有的人喜欢菊花，有的人既喜欢梅花又喜欢菊花 。 解： P(x)：x是人 L(x,y)：x喜欢y 其中，y的个体域是{梅花，…
Perl 校验命中的脚本
这个脚本无比的重要，虽然代码简单，但是在判断是否准确上，有着很重要的地位。 通过icmp和解析，它有一定意义所在。 mark!.. #!/usr/bin/perl use Net::Ping; sub icmp_domain{$ktrue;local($host)shift;$pNet::Ping->new("…
从基于网络的安装服务器安装操作系统,PXE 概述 - Sun Fire X4800 服务器安装指南（适用于 Linux 操作系统）...
PXE 概述使用 Linux 预引导执行环境 (preboot execution environment, PXE) 可从网络接口而不是本地存储引导服务器。对于 OS 安装，从基于 PXE 的OS 分发映像引导目标服务器就像从 DVD 引导一样，不同之处在于介质位于网络中。要使用 PXE，您需…
下载最新Android代码的方法
之前我是去Android官方网站下载最新Android代码，但是这种方法需要翻墙，而且有时候翻墙又不太方便，今天我发现一个不错的网站，是清华大学搞的，跟Android官方的代码基本保持同步，而且下载方法跟Android官方的…