使用facebook的Lottie来完成Android中的动画

最近一段时间, 在开发一款海外版的天气应用. 为达到出色的用户体验, 免不了在动画方面要达到一定水准.

device-2017-10-16-115259.gif

在没有Lottie前, 从简单到复杂的动画都需要通过自定义View来实现, 开发成本是比较高的, 而且对于开发人员的技术能力, 包括数学知识都有一定的要求.
以上面的截图动画为例, 我自己之前使用自定义View的方式实现过一套, 对云彩的位移, 背景透明度的变化, 几只鸟的飞行貝塞尔轨迹, 实现起来要求对自定义View各种细节, 动画实现的细节, 包括数学计算出正确的坐标, 都需要比较高的技术要求.
而不巧, 因为是天气应用, 要在不同的天气场景下对背景动效进行切换, 类似的动效在我们的app中有7套, 都实现一遍, 不管是从技术实现可行性, 还是开发时间成本考虑, 都是比较大的"负担".
很幸运的是, facebook推出的Lottie, 可以帮助开发人员以比较低的成本来完成这件事, 客户端的开发人员只需要和UI设计师进行比较充分的沟通和屏幕适配即可. 当然还需要自己写一个Manager对这些动效素材进行合理的管理.

使用Lottie的流程.
  1. build.gradle
dependencies {  
  compile 'com.airbnb.android:lottie:2.1.2'
}
  1. xml文件中引用
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />
  1. java代码中指定加载素材的位置
private LottieAnimationView mLottieView;

mLottieView = (LottieAnimationView) findViewById(R.id.lottieView);
mLottieView.setImageAssetsFolder("images");
mLottieView.setAnimation("data.json");
mLottieView.playAnimation();
  1. 在assets目录下放入素材文件.
    简单来说, 就是把UI设计师通过AE导出的data.json和各种静态图片放进assets中的指定目录即可.
使用Lottie还存在的优势

除了大幅度降低Android客户端的开发成本外, Lottie还有其他不少优势. 最典型的是:

  • 跨平台,支持 Android、iOS、React Native 平台
  • 资源动态下载,减小 APP 体积,上线新的动画效果不需要发版
    光这两点就值得开发者对其一试.
使用Lottie存在的局限性

当然Lottie也不是万能, 不可能满足所有的业务场景, 例如, 如果需要通过以传入数据的方式, 指定动效中的子元素的位置, 甚至包括对各个元素进行拖拽, 这些产品需求就是无法完成的.
以产品的角度看, 可以把它简单理解为gif, 一种"静态"的动效图.

推荐阅读更多精彩内容