这个项目碉堡了

   <p>新年第一天上班，没想到就立春了，俗话说，一年之计在于春，全新的 17 年开始啦，来，收拾下心情，投入到工作中，撸起袖子，就是干！</p>    <p>就在前几天，Airbnb 开源了一个项目叫做 Lottie，我个人觉得这个项目简直碉堡了！</p>    <p>动画相信大家都不陌生，在 App 开发过程中，适当的使用动画可以提升用户体验，使我们的产品锦上添花，对于一些简单的动画，我们很容易就能实现，但是对于一些比较复杂的动画，实现起来就比较麻烦了，比如下图的一些动画：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a99333d9a6f1b9276f8ba61038590b56.gif"> <img src="https://simg.open-open.com/show/06dc5c3f51576ee9c8895bf0324c6594.gif"> <img src="https://simg.open-open.com/show/48c4be27a6672b4e4b173580b87bd0ea.gif"> <img src="https://simg.open-open.com/show/f7dbcabe3ed9a34d5a73a2d5800dd0cb.gif"> <img src="https://simg.open-open.com/show/270ed9bc73a18fde74611bdbef419975.gif"></p>    <p>怎么样？这些可不是简单的移动、缩放、旋转就搞得定的，可能有些人思考了之后大概有以下实现思路：</p>    <ul>     <li> <p>使用 Gif，这种方式当然可行，但是使用 Gif 占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配，因为 Android 没有提供原生 Gif 的 api 支持，所以这种方案还会遇到兼容性问题；</p> </li>     <li> <p>使用帧动画，这种方式还不如使用 Gif，一般来说使用帧动画占用空间比 Gif 还要大的多，而且一样要做多屏幕分辨率的适配，不过不会遇到兼容性问题；</p> </li>     <li> <p>使用视频，这种方式当然可以，但是一般来说宣传片才用的上视频，一般的动画远不需要用视频才能实现的，未免有些大材小用了，而且占用空间依然很大。</p> </li>    </ul>    <p>就没有更好的实现方式了么？</p>    <p>当然有，Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，兼容性是一个问题，不过整个实现流程非常麻烦，每次全新实现一个动画都得重头来过，最最关键的是，如果一个公司下的 App，iOS 也要实现一套一样的动画，资源的占用就显得过大了。</p>    <p>而 Airbnb 开源的这个项目完美的解决以上难题，我们来看下整个流程是什么样的。</p>    <p>假设我们要做一个引导页面的欢迎动画，这个一般设计师会用 Adobe 旗下的 After Effects （简称 AE）来做个动画出来，设计师用 AE 做个动画比工程师用代码去实现一个动画要快的多的多，调整起来也很方便，之后 AE 上有一款插件叫做 Bodymovin ，这个插件也比较屌，可以直接根据 AE 上的动画文件导出 json 文件，这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹，之后我们在项目中引用 Lottie 开源库，在布局文件中简单的加上这么一句就完美的实现了。</p>    <pre>  <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" /></pre>    <p>或者代码中这样使用：</p>    <pre>  LottieAnimationView animationView = findViewById(R.id.animation_view);  animationView.setAnimation("hello-world.json");  animationView.loop(true);</pre>    <p>值得一提的是，我们的 hello-world.json 文件只需要放在 app/src/main/assets 目录下就 ok 了。</p>    <p>当然，还有更多的用法，比如给动画添加事件，比如描述动画的 json 文件可以远程更新下载到本地，这样就可以不动声色的定期更新你的动画了。</p>    <p>有了这个库，我们可以充分发挥我们的想象力，很简单方便的就实现了一套很酷炫的动画，最重要的是，这个库是跨平台的，支持 Android、iOS 以及 ReactNative，共用一套 json 动画描述文件。</p>    <p>其实 非死book 前段时间开源了一个类似的库叫做 Keyframes ，也是跨平台的，但是 Littie 比 Keyframes 支持的特性更多，而且据 Airbnb 官方博客介绍，以后对让这个库支持更多的特性与功能，不得不说，真乃良心！</p>    <p>最后，这个库的开源地址在这里：</p>    <p>Android: <a href="/misc/goto?guid=4959736028168964770" rel="nofollow,noindex">https://github.com/airbnb/lottie-android</a></p>    <p>iOS: <a href="/misc/goto?guid=4959736028255386307" rel="nofollow,noindex">https://github.com/airbnb/lottie-ios</a></p>    <p>ReactNative: <a href="/misc/goto?guid=4959736028344705166" rel="nofollow,noindex">https://github.com/airbnb/lottie-react-native</a></p>    <p>最最后，Airbnb 还提供了一个 sample apk，考虑到部分人在 Google Play 上下载 apk 有些困难，我也贴心的把 sample apk 下载下来了，公众号 AndroidDeveloper 后台回复「lottie」关键字获取。</p>    <p> </p>    <p> </p>    <p>来自：http://stormzhang.com/2017/02/03/airbnb-lottie-android/</p>    <p> </p>