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

Lottie

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

设计师在After Effects设计好相关的动画,然后安装上BodyMovin这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 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

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

众所周知,属性动画、补间动画通常只能做一些效果简单的,而做复杂的动画可采用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文件放入其中。

引用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) {

      }
    });

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

(0)

相关推荐

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

    Lottie Lottie是 Airbnb 开源的一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画的实现,往往会写很多的 code 来实现它,而且调试动画的效果会比较花费时间.用它来解决某些动画会带来很大的便利. 设计师在After Effects设计好相关的动画,然后安装上BodyMovin这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果. 优势 开发可以方便的实现动画,节约

  • android中图片加载到内存的实例代码

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="matc

  • Android使用glide加载gif动画设置播放次数

    在使用glide加载gif动画,有时需要设置播放的次数,然后播放玩一次或者几次之后,需要在播放完做一些其他的操作,直接看代码: Glide.with(this) .load(R.drawable.xiaoguo) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .listener(new RequestListener<Integer, GlideDrawable>() { @Override public boolean onException(Ex

  • Python3实现的画图及加载图片动画效果示例

    本文实例讲述了Python3实现的画图及加载图片动画效果.分享给大家供大家参考,具体如下: #__*__coding:utf-8__*__ #python3 import time from tkinter import * def moveImage(event):#图片logo.gif的移动要绑定的函数 if event.keysym=='Up': canvas.move(1,0,-3)#移动ID为1的事物,使得横坐标加0,纵坐标减3 elif event.keysym=='Down': c

  • android调用H5显示加载中效果的示例代码

    我们在看有些应用在引入h5的时候经常会有一个进度条在转,显示加载的意思,那么这个东西其实一般是我们android端做的事(不要把所有的事都推给h5~~~),其实实现起来很简单, ok 废话不多说,上代码吧 wv.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view,

  • Android之高效加载大图的方法示例

    加载大图到内存是一件令人头疼的事情.因为大图的原因,我们会在Crash报告中看到OOM(内存不足).Android的内存有限,这一点我们应该心里有数. stackoverflow上有许多相关问题的回答,当你碰到oom时,可以直接跳过本文,粘贴复制答案即可.但是对于其他人来说,我想告诉你们一些加载大图的知识和原理. 加载Bitmap到内存 so easy.你所需要做的就是使用BitmapFactory解码你的图片. Bitmap bitmap = BitmapFactory.decodeResou

  • VUE页面中加载外部HTML的示例代码

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的. 所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果. 不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG. 本文思路是把HTML请求以来,以v-html的形式加载到页面内部.注册全局组件[v-html-panel] 1.HtmlPanel.vue文件 <template> <div> <mu-circular-progress :

  • vue+element tree懒加载更新数据的示例代码

    使用element tree实现懒加载,更新某一节点的数据 1.tree 懒加载 只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数.这里贴上官网给出的方法 <el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node

  • 异步动态加载JS并运行(示例代码)

    如下所示: 复制代码 代码如下: (function(){var ga=document.createElement('script');ga.type?=?'text/javascript';?ga.async?=?true;ga.src?=?('https:'?==?document.location.protocol???'https://ssl'?:?'http://www')?+?'.google-analytics.com/ga.js';    var?s?=?document.ge

  • Android中Glide加载到RelativeLayout背景图方法示例

    前言 Glide是 Google推荐的图片加载库,它可以支持来自url,Android资源,文件,Uri中的图片加载,同时还支持gif图片的加载,以及各种图片显示前的bitmap处理(例如:圆角图片,圆形图片,高斯模糊,旋转,灰度等等),缓存处理,请求优先级处理,动画处理,缩略图处理,图片大小自定义等等.可谓是非常的强大. 一般情况下我们都是使用Glide加载图片到ImageView上,那么如何加载到RelativeLayout的背景上呢? RelativeLayou是一个用于设计用户界面的强大

随机推荐