| 动画库 Lottie 的使用 | 您所在的位置：网站首页 › lottieanimationview › 动画库 Lottie 的使用 |
动画库 Lottie 的使用
|
本文主要介绍动画开源库 Lottie 在 Android 中的使用。 前言在日常APP开发中，为了提升用户感官舒适度等原因，我们会在APP中加入适量动画。 而传统手写动画方式往往存在诸多问题: 动画复杂而实现困难 图片素材占用体积过大 不同Native平台都需各自实现，开发成本高 不同Native平台实现的最终效果不一致 后期视觉联调差异化大 难道就没有一种简便且高效的方案来减缓或解决上述问题吗？ 答: 有的，那就是本文要介绍的主角 Lottie。 一、Lottie 是什么？Lottie是Airbnb开源的一个面向IOS、Android、React Native的动画库，可以解析用 Adobe After Effects 制作动画后通过 Bodymovin 插件导出的 Json 数据文件并在移动端原生渲染。 通俗点说，它是一款动画开源库，通过解析特定的Json文件或Json文本，可直接在移动端上渲染出复杂的动画效果。 参考图释 二、Lottie 能干什么?它可以简便高效的实现复杂动画，替代传统低效的手写动画方式。 动画展示: 上方的动画是通过Lottie直接实现的。 如果我们使用手写代码方式实现，可以说是很难！ 而通过 Lottie 实现时，需要的仅是一个Json文件或一段Json文本，并通过简洁的代码集成即可。 集成代码可能精简到如下模样: 1 2 3 4 5 6 7 三、为什么使用 Lottie?简便，开发成本低 相对于传统方式，动画不再是全部手写，所需做得只是嵌入XML并配置动画属性，集成快，开发时间少，开发成本低。 不同 Native 平台效果基本一致 渲染交由Lottie引擎内部实现，无需开发者处理平台差异，多平台共用同一个动画配置文件，效果一致性高。 占用包体积小 Lottie配置文件由Json文本串构成，相对于图片，占用体积更小。 动画效果不失真 传统图片拉伸或压缩导致失真，而Lottie为矢量图展示，不会出现失真情况。 动画效果可以云端控制 由于Lottie动画基于Json文件或文本解析，因此可以实现云端下发，实现动态加载，动态控制动画样式。 四、如何使用 Lottie？Lottie 仅支持用 Gradle 构建配置，最低支持安卓版本 16。 1. 添加依赖到 build.gradle 1 2 3 4 5 6 7 dependencies { implementation 'com.airbnb.android:lottie:2.5.4' } 或 dependencies { implementation "com.airbnb.android:lottie:${全局版本变量}" } 2. 添加 Adobe After Effects 导出的动画 Json 文件通常由视觉工程师确认动效后通过AE导出, 我们只需将该Json文件保存至 /raw 或 /assets文件夹下。 3. XML中嵌入基本布局 1 2 3 4 4. 加载播放动画，两类方式可选① XML中静态配置, 举例: 1 2 3 4 5 6 7 8 9 10 11 12 13② 代码动态配置, 举例: 如下代码会在后台异步加载动画文件，并在加载完成后开始渲染动画。 1 2 3 4 LottieAnimationView animationView = ...; animationView.setAnimation(R.raw.hello_world); animationView.loop(true); animationView.playAnimation(); 五、其他拓展使用 1. 直接解析Json文本串加载动画 1 2 3 4 5 6 7 8 9 10 JsonReader jsonReader = new JsonReader(new StringReader(jsonStr)); lottieView.setAnimation(jsonReader); lottieView.playAnimation(); 或 Cancellable cancellable = LottieComposition.Factory.fromJsonString(jsonStr, composition -> { lottieView.setComposition(composition); lottieView.playAnimation(); }); //必要时取消进行中的异步操作 cancellable.cancel(); 2. 配合网络下载，实现下载Json配置并动态加载 1 2 3 4 5 6 7 8 9 10 11 12 13 Call call = RetrofitComponent.fetchLottieConfig();//伪代码 call.enqueue(new Callback() { @Override public void onResponse(Call call, Response response) { //String json = response.body().string(); //交由Lottie处理... } @Override public void onFailure(Call call, Throwable t) { //do something. } }); 3. 动画加载监听器根据业务需要进行动画过程监听: 1 2 3 4 5 6 7 8 9 10 11 animationView.addAnimatorUpdateListener((animation) -> { // do something. }); animationView.playAnimation(); ... if (animationView.isAnimating()) { // do something. } ... animationView.setProgress(0.5f); ... 4. LottieDrawable 的使用 1 2 3 4 5 6 7 8 LottieDrawable drawable = new LottieDrawable(); LottieComposition.Factory.fromAssetFileName(getApplicationContext(), "lottie_pin_jump.json", composition -> { drawable.setComposition(composition); //目前显示为静态图 ivLottie.setImageDrawable(drawable); //调用start()开始播放动画 drawable.start(); }); 5. 更多使用可参考文末官方链接 六、需要考虑的问题 由于是依赖于AE做的动画，估计以后不只是要求视觉设计师精通AE，连前端开发都需要了解AE Lottie 对 Json 文件的支持待完善，目前存在部分AE导出成 Json 文件无法渲染或渲染不佳 支持的功能存在限制，可参考 功能支持列表。 七、总结尽管Lottie还存在诸多小问题，但它所带来的效率提升绝对是传统开发方式无法比拟的。我们要做的是正确善用它。 参考资料官网网址Github地址测试用Json文件项目中文翻译版 (略有差异) |
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |