初次接触 Lottie

项目中需要加载一个 GIF 的小动图,本来想用制作好的 GIF, 但发现一个更好玩的 Lottie ,上一个官网的效果图
这里写图片描述

其实使用起来很简单:

  • 1,添加相应依赖,这里用低版本
    compile ‘com.airbnb.android:lottie:1+’

  • 2,在需要的布局的XML文件中加入,将imgData.json数据放入assets目录中

    <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="24dp"
            android:layout_height="24dp"
            app:lottie_fileName="imgData.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />
记得添加声明
xmlns:app="http://schemas.android.com/apk/res-auto"
  • 3,直接获取控件,对动画做些简单的操作,如:暂停、播放、设置动图的速率
    LottieAnimationView提供的pauseAnimation(); playAnimation(); setSpeed(1.2f);

  • 这是imgData.json下载地址,跳动的柱状图

  • 顺便也贴imgData.json里面数据出来

{"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"形状图层 4","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[33.063,36.062,0]},"a":{"k":[-10.941,14.375,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":-106,"s":[101.392,97.824,100],"e":[101.392,97.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p667_0p667_0p167_0p167","0p667_1_0p167_0p167","0p667_0p667_0p167_0p167"],"t":-92,"s":[101.392,97.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":-61,"s":[101.392,66.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":-45,"s":[101.392,66.824,100],"e":[101.392,39.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":-12,"s":[101.392,39.824,100],"e":[101.392,39.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":-7,"s":[101.392,39.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":36,"s":[101.392,66.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":42,"s":[101.392,66.824,100],"e":[101.392,97.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":84,"s":[101.392,97.824,100],"e":[101.392,97.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":90,"s":[101.392,97.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":133,"s":[101.392,66.824,100],"e":[101.392,66.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":139,"s":[101.392,66.824,100],"e":[101.392,39.824,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.667,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0.333,0.333,0.333]},"n":["0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333","0p667_0p667_0p333_0p333"],"t":182,"s":[101.392,39.824,100],"e":[101.392,39.824,100]},{"t":190}]}},"ao":0,"shapes":[{"ty":"gr","it
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值