请选择 进入手机版 | 继续访问电脑版

[Android] Android Lottie实现中秋月饼变明月动画殊效 实例

[复制链接]
查看170 | 回复24 | 2021-9-14 06:46:15 | 显示全部楼层 |阅读模式
目次

前言

小菜在 Android 端进举措 画处理时紧张 用的是 Android 自带的三种动画情势 ,本日 小菜简单尝试通过 Airbnb Lottie 展示一个中秋月饼变明月的小动画;

Lottie

Lottie 动画是 Airbnb 开源的一套多平台兼容的动画情势 ,小菜之前简单尝试过 Flutter 版本,使用 非常便捷,本日 小菜简单相识 一下 Android 版本;

Android Lottie实现中秋月饼变明月动画殊效
实例

案例尝试

1. 集成依靠

在 build.gradle 中集成最新版本的 Lottie 依靠 并同步;

  1. api 'com.airbnb.android:lottie:4.1.0'
复制代码

2. 添加 LottieAnimationView 加载网络资源

起首 在 xml 文件中添加 LottieAnimationView,之后通过 setAnimationFromUrl() 加载网络资源;此中 加载网络图片时有两个重载方法,此中 cacheKey 为缓存策略;加载完网络资源之后还必要 playAnimation( 启动动画;

  1. <com.airbnb.lottie.LottieAnimationView
  2. android:id="@+id/lottie_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. />
  6. mView = (LottieAnimationView) this.findViewById(R.id.lottie_view);
  7. mView.setAnimationFromUrl("https://assets6.lottiefiles.com/packages/lf20_Tprkoc.json");
  8. mView.playAnimation();
复制代码

Android Lottie实现中秋月饼变明月动画殊效
实例

3. 加载本地资源

当 LottieAnimationView 加载本地资源时,必要 先下载天生 的 json 文件,并添加到工程中,通过 setAnimation() 引入本地资源;此中 setAnimation() 也有多个重载方法,可以机动 应用;

  1. mView2 = (LottieAnimationView) this.findViewById(R.id.lottie_view2);
  2. mView2.setAnimation("mooncake.json");
  3. mView2.playAnimation();
复制代码

Android Lottie实现中秋月饼变明月动画殊效
实例

4. 循环播放 & 动画监听

前两步设置完 setAnimation() 之后,播放完成就克制 动画,若必要 重复播放,可以通过 loop(true) 方式举行 循环播放,但该方法在新的 API 中不建议使用 ,可以通过 setRepeatCount() 设置播放次数,或通过动画监听在动画竣事 时再次播放等;

  1. mView2.loop(true);
  2. mView1.setRepeatCount(5);
复制代码

可以通过 addAnimatorListener() 进举措 画监听;此中 当设置 **** 播放次数后,每次播放均会调用 onAnimationRepeat() 回调,播放竣事 之后才会调用 onAnimationEnd();而假如 不设置播放次数时,不会进入 onAnimationRepeat() 回调;

  1. mView2.addAnimatorListener(new Animator.AnimatorListener() {
  2. @Override
  3. public void onAnimationStart(Animator animator) {
  4. Log.e(TAG, "-> onAnimationStart()");
  5. }
  6. @Override
  7. public void onAnimationEnd(Animator animator) {
  8. Log.e(TAG, "-> onAnimationEnd()");
  9. }
  10. @Override
  11. public void onAnimationCancel(Animator animator) {
  12. Log.e(TAG, "-> onAnimationCancel()");
  13. }
  14. @Override
  15. public void onAnimationRepeat(Animator animator) {
  16. Log.e(TAG, "-> onAnimationRepeat()");
  17. }
  18. });
复制代码

Android Lottie实现中秋月饼变明月动画殊效
实例

5. 停息 & 继续 & 取消

小菜通过 playAnimation() 使动画举行 播放;而 Lottie 也提供了 pauseAnimation() 停息 动画;resumeAnimation() 停息 后继续播放以及 cancelAnimation() 取消动画等方法;

此中 调用 playAnimation() 时会从动画起始位置播放,而 resumeAnimation() 会从停息 或取消动画克制 位置播放;pauseAnimation() 和 cancelAnimation() 均会克制 动画,但 cancelAnimation() 克制 后会 lottieDrawable.cancelAnimation() 清空动画 Drawable,且会在 onAnimationCancel() 监听中举行 回调;

  1. @Override
  2. public void onClick(View view) {
  3. switch (view.getId()){
  4. case R.id.main_btn1:
  5. mView2.playAnimation();
  6. break;
  7. case R.id.main_btn2:
  8. mView2.pauseAnimation();
  9. break;
  10. case R.id.main_btn3:
  11. mView2.resumeAnimation();
  12. break;
  13. case R.id.main_btn4:
  14. mView2.cancelAnimation();
  15. break;
  16. }
  17. }
复制代码

Android Lottie实现中秋月饼变明月动画殊效
实例

小扩展

1. 硬件加速器

小菜在使用 Lottie 时建议开启硬件加速器,降低动画帧率,避免卡顿;

  1. android:hardwareAccelerated="true"
复制代码

2. json 文件剖析

小菜之前以为 Lottie 的 json 文件是一个很神奇很复杂的天书,本日 小菜简单先容 一下此中 属性对应关系;

Android Lottie实现中秋月饼变明月动画殊效
实例

团体 布局 包括如下几个部分:v 为对应 bodymovin 动画版本;fr 为帧率;ip / op 分别对应起始/竣事 关键帧;w / h 为动画宽高;assets 为资源信息,包括 Drawable 等;layers 为图层信息;

Android Lottie实现中秋月饼变明月动画殊效
实例

asstes 中 w / h 为资源宽高;u / p 非别对应资源露肩和名称;此中 的 layers 也为图层信息;layers 中的 ks 为动画的紧张 信息;

小菜明白 Lottie 团体 是使用 属性动画控制进度,通过进度变更更改 layers 中触发 LottieAnimationView 重绘各个资源信息;

总结

到此这篇关于Android Lottie实现中秋月饼变明月动画殊效 的文章就先容 到这了,更多相干 Android Lottie动画殊效 内容请搜索 脚本之家从前 的文章或继续欣赏 下面的相干 文章盼望 大家以后多多支持脚本之家!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 123456819 | 2021-9-14 09:08:23 | 显示全部楼层
我默默的回帖,从不声张!
回复

使用道具 举报

avatar 小雨敲窗y | 2021-9-14 13:26:21 | 显示全部楼层
好帖子!
回复

使用道具 举报

avatar 日啊驴吗厩 | 2021-9-18 01:30:21 | 显示全部楼层
谢谢admin楼主的分享!
回复

使用道具 举报

avatar 千山落月坝 | 2021-9-21 13:23:59 | 显示全部楼层
admin楼主,您忘记吃药了吧?
回复

使用道具 举报

avatar 冷专问 | 2021-10-2 23:15:27 | 显示全部楼层
admin楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,影视频道的网站所有电影和连续剧都可以免费看的。访问地址:http://tv.mxswl.com
回复

使用道具 举报

avatar 一叶知秋117 | 2021-10-6 04:55:44 | 显示全部楼层
知识就是力量啊!
回复

使用道具 举报

avatar 半岛宫殿rw | 2021-10-6 19:00:38 | 显示全部楼层
感谢admin楼主的推荐!
回复

使用道具 举报

avatar 123457278 | 2021-10-7 09:15:25 | 显示全部楼层
admin楼主病的不轻啊!
回复

使用道具 举报

avatar 天八部饶gc | 2021-10-8 09:41:13 | 显示全部楼层
学习雷锋,好好回帖!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则