这个项目碉堡了
新年第一天上班，没想到就立春了，俗话说，一年之计在于春，全新的 17 年开始啦，来，收拾下心情，投入到工做中，撸起袖子，就是干！react
就在前几天，Airbnb 开源了一个项目叫作 Lottie，我我的以为这个项目简直碉堡了！android
动画相信你们都不陌生，在 App 开发过程当中，适当的使用动画能够提高用户体验，使咱们的产品锦上添花，对于一些简单的动画，咱们很容易就能实现，可是对于一些比较复杂的动画，实现起来就比较麻烦了，好比下图的一些动画：ios
怎么样？这些可不是简单的移动、缩放、旋转就搞得定的，可能有些人思考了以后大概有如下实现思路：git
使用 Gif，这种方式固然可行，可是使用 Gif 占用空间较大，并且须要为各类屏幕尺寸、分辨率作适配，由于 Android 没有提供原生 Gif 的 api 支持，因此这种方案还会遇到兼容性问题；github
使用帧动画，这种方式还不如使用 Gif，通常来讲使用帧动画占用空间比 Gif 还要大的多，并且同样要作多屏幕分辨率的适配，不过不会遇到兼容性问题；json
使用视频，这种方式固然能够，可是通常来讲宣传片才用的上视频，通常的动画远不须要用视频才能实现的，未免有些大材小用了，并且占用空间依然很大。react-native
就没有更好的实现方式了么？api
固然有，Android 5.x 以后提供了对 SVG 的支持，经过 VectorDrawable、AnimatedVectorDrawable 的结合能够实现一些稍微复杂的动画，兼容性是一个问题，不过整个实现流程很是麻烦，每次全新实现一个动画都得重头来过，最最关键的是，若是一个公司下的 App，iOS 也要实现一套同样的动画，资源的占用就显得过大了。ruby
而 Airbnb 开源的这个项目完美的解决以上难题，咱们来看下整个流程是什么样的。微信
假设咱们要作一个引导页面的欢迎动画，这个通常设计师会用 Adobe 旗下的 After Effects （简称 AE）来作个动画出来，设计师用 AE 作个动画比工程师用代码去实现一个动画要快的多的多，调整起来也很方便，以后 AE 上有一款插件叫作 Bodymovin，这个插件也比较屌，能够直接根据 AE 上的动画文件导出 json 文件，这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹，以后咱们在项目中引用 Lottie 开源库，在布局文件中简单的加上这么一句就完美的实现了。
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />复制代码
或者代码中这样使用：
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);复制代码
值得一提的是，咱们的 hello-world.json 文件只须要放在 app/src/main/assets 目录下就 ok 了。
固然，还有更多的用法，好比给动画添加事件，好比描述动画的 json 文件能够远程更新下载到本地，这样就能够不动声色的按期更新你的动画了。
有了这个库，咱们能够充分发挥咱们的想象力，很简单方便的就实现了一套很酷炫的动画，最重要的是，这个库是跨平台的，支持 Android、iOS 以及 ReactNative，共用一套 json 动画描述文件。
其实 Facebook 前段时间开源了一个相似的库叫作 Keyframes，也是跨平台的，可是 Littie 比 Keyframes 支持的特性更多，并且据 Airbnb 官方博客介绍，之后对让这个库支持更多的特性与功能，不得不说，真乃良心！
最后，这个库的开源地址在这里：
Android: github.com/airbnb/lott…
ReactNative: github.com/airbnb/lott…
最最后，Airbnb 还提供了一个 sample apk，考虑到部分人在 Google Play 上下载 apk 有些困难，我也贴心的把 sample apk 下载下来了，公众号 googdev 后台回复「lottie」关键字获取。
本文原创发布于微信公众号 stormzhang，id: googdev，不止技术分享，还有更多扯淡，关注请慎重！
