最近一段时间, 在开发一款海外版的天气应用. 为达到出色的用户体验, 免不了在动画方面要达到一定水准.
device-2017-10-16-115259.gif
在没有Lottie前, 从简单到复杂的动画都需要通过自定义View来实现, 开发成本是比较高的, 而且对于开发人员的技术能力, 包括数学知识都有一定的要求.
以上面的截图动画为例, 我自己之前使用自定义View的方式实现过一套, 对云彩的位移, 背景透明度的变化, 几只鸟的飞行貝塞尔轨迹, 实现起来要求对自定义View各种细节, 动画实现的细节, 包括数学计算出正确的坐标, 都需要比较高的技术要求.
而不巧, 因为是天气应用, 要在不同的天气场景下对背景动效进行切换, 类似的动效在我们的app中有7套, 都实现一遍, 不管是从技术实现可行性, 还是开发时间成本考虑, 都是比较大的"负担".
很幸运的是, facebook推出的Lottie, 可以帮助开发人员以比较低的成本来完成这件事, 客户端的开发人员只需要和UI设计师进行比较充分的沟通和屏幕适配即可. 当然还需要自己写一个Manager对这些动效素材进行合理的管理.
使用Lottie的流程.
- build.gradle
dependencies {
compile 'com.airbnb.android:lottie:2.1.2'
}
- xml文件中引用
- java代码中指定加载素材的位置
private LottieAnimationView mLottieView;
mLottieView = (LottieAnimationView) findViewById(R.id.lottieView);
mLottieView.setImageAssetsFolder("images");
mLottieView.setAnimation("data.json");
mLottieView.playAnimation();
- 在assets目录下放入素材文件.
简单来说, 就是把UI设计师通过AE导出的data.json和各种静态图片放进assets中的指定目录即可.
使用Lottie还存在的优势
除了大幅度降低Android客户端的开发成本外, Lottie还有其他不少优势. 最典型的是:
- 跨平台，支持 Android、iOS、React Native 平台
- 资源动态下载，减小 APP 体积，上线新的动画效果不需要发版
光这两点就值得开发者对其一试.
使用Lottie存在的局限性
当然Lottie也不是万能, 不可能满足所有的业务场景, 例如, 如果需要通过以传入数据的方式, 指定动效中的子元素的位置, 甚至包括对各个元素进行拖拽, 这些产品需求就是无法完成的.
以产品的角度看, 可以把它简单理解为gif, 一种"静态"的动效图.