Android使用lottie加载json动画的示例代码

发布时间:2020-09-23 15:56:30 作者:翻滚吧李博
来源:脚本之家 阅读:291

Lottie

Lottie 是 Airbnb 开源的一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画的实现,往往会写很多的 code 来实现它,而且调试动画的效果会比较花费时间。用它来解决某些动画会带来很大的便利。

设计师在After Effects 设计好相关的动画,然后安装上BodyMovin 这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果。

Android使用lottie加载json动画的示例代码

优势

  1. 开发可以方便的实现动画,节约调试动画效果时间等,不用写一大堆 code 去实现动画,只要设计给相关的 JSON 文件就可以了。
  2. 多个平台可以共用,例如 iOS 和 Android,公用一个动画。
  3. 可以通过 URL 的方式加载 JSON 文件,来替换客户端动画,不用发版本了
  4. 设计想了一个屌炸天的动画,然后给到开发,开发说这个实现不了,或者说很费时间,然后让设计用这种方式去实现。
  5. 对于 iOS 来说支持 ViewController 转场动画
  6. iOS 平台上用 Core Animation 做矢量动画。性能不错,而且有缓存
  7. 对比于用 GIF 动画,手写动画,轻量,性能和存储上都更佳。

不足之处

  1. iOS 版本要 >= 8.0 才可以使用。不支持 7.x
  2. 对于一些交互性的动画,支持不是很好。主要是对于播放性的动画
  3. Bodymovin 插件待完善,仍然有部分 AE 效果无法成功导出
  4. 动画无法被编辑,加载下来是什么样子,就原封不动

github代码传送门 https://github.com/18380438200/LottieAnim

先上效果图,这个是做的一个仿抖音的点赞动画:

Android使用lottie加载json动画的示例代码

众所周知,属性动画、补间动画通常只能做一些效果简单的,而做复杂的动画可采用gif图,帧动画,但是这样资源空间增大导致apk增大不小。而加载json文件实现动画就完美解决以上问题。

设计师AE导出Json文件,Lotti 解析Json文件后调Core Animation的API绘制渲染。所以让你们公司的UI去学一学AE吧,多们技能好防身。

Lottie开源库地址:一个集Android、Ios、React Native与Web平台于一身的女子。

https://github.com/airbnb/lottie-android

使用方式:

引入库

compile 'com.airbnb.android:lottie:1.0.1'

创建assets文件夹,将json文件放入其中。

Android使用lottie加载json动画的示例代码

引用LottieAnimationView控件

  <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_likeanim"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_fileName="likeanim.json"
    app:lottie_loop="true"
    android:layout_centerInParent="true"/>

常用属性:

  1. app:lottie_fileName="likeanim.json"  加载json的文件名
  2. app:lottie_loop="true"  是否循环播放
  3. app:lottie_autoPlay="true"  是否自动播放

常用操作:

    lottieLike.playAnimation();  //播放
    lottieLike.pauseAnimation(); //暂停
    lottieLike.cancelAnimation(); //取消
    lottieLike.getDuration();  //获取动画时长
    lottieLike.addAnimatorListener(new Animator.AnimatorListener() { //添加动画监听
      @Override
      public void onAnimationStart(Animator animation) {

      }

      @Override
      public void onAnimationEnd(Animator animation) {

      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. 怎样在vue里添加好看的lottie动画
  2. Android如何使用Path实现搜索动态加载动画效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

lottie json动画 画的

上一篇:JS ES6多行字符串与连接字符串的表示方法

下一篇:python的错误类型有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》