新年第一天上班,没想到就立春了。俗话说,一年之计在于春,全新的 17 年開始啦。来,收拾下心情,投入到工作中。撸起袖子,就是干!
就在前几天,Airbnb 开源了一个项目叫做 Lottie。我个人认为这个项目简直碉堡了!
动画相信大家都不陌生。在 App 开发过程中,适当的使用动画能够提升用户体验,使我们的产品锦上添花。对于一些简单的动画,我们非常easy就能实现,可是对于一些比較复杂的动画,实现起来就比較麻烦了。比方下图的一些动画:
怎么样?这些可不是简单的移动、缩放、旋转就搞得定的。可能有些人思考了之后大概有下面实现思路:
使用 Gif。这样的方式当然可行。可是使用 Gif 占用空间较大。并且须要为各种屏幕尺寸、分辨率做适配,由于 Android 没有提供原生 Gif 的 api 支持,所以这样的方案还会遇到兼容性问题。
使用帧动画。这样的方式还不如使用 Gif,一般来说使用帧动画占用空间比 Gif 还要大的多,并且一样要做多屏幕分辨率的适配。只是不会遇到兼容性问题;
使用视频。这样的方式当然能够,可是一般来说宣传片才用的上视频,一般的动画远不须要用视频才干实现的。未免有些大材小用了。并且占用空间依旧非常大。
就没有更好的实现方式了么?
当然有,Android 5.x 之后提供了对 SVG 的支持。通过 VectorDrawable、AnimatedVectorDrawable 的结合能够实现一些略微复杂的动画。兼容性是一个问题,只是整个实现流程非常麻烦。每次全新实现一个动画都得重头来过。最最关键的是,如果一个公司下的 App,iOS 也要实现一套一样的动画,资源的占用就显得过大了。
而 Airbnb 开源的这个项目完美的解决以上难题,我们来看下整个流程是什么样的。
如果我们要做一个引导页面的欢迎动画,这个一般设计师会用 Adobe 旗下的 After Effects (简称 AE)来做个动画出来,设计师用 AE 做个动画比project师用代码去实现一个动画要快的多的多,调整起来也非常方便,之后 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: https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
ReactNative: https://github.com/airbnb/lottie-react-native
最最后,Airbnb 还提供了一个 sample apk,考虑到部分人在 Google Play 上下载 apk 有些困难,我也贴心的把 sample apk 下载下来了,公众号 AndroidDeveloper 后台回复「lottie」关键字获取。
本文原创公布于微信公众号 AndroidDeveloper,id: googdev,不止技术分享。还有很多其它扯淡。关注请谨慎!