感觉让人耳目一新的动画库Lottie

语言: CN / TW / HK

theme: juejin highlight: tomorrow


小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。

前几天客户觉得我们项目加载动画不太好看,想要换一个,我当时就....没了脾气,唉,客户就是爷.开整吧,反正撑死就是个GIF,如果是口述就让UI做一个,我直接报工2天,表示这个如果设计的不够完美对我们的性能有十分大的阻碍.嘿嘿,实际上是想摸鱼.

8a2cb58af34cd16361b34b0275dfefe.jpg

后面客户果不其然发了一个动态图

loading加载.gif

你还别说,真挺好看,比我们默认的菊花好看多了,当我快乐的应用上去时发现他有一块默认的白色背景,后面找客户再要一个没有白色背景的GIF时客户直接甩了一个网址

image.png

链接

进去之后发现是一个网站,里面超多炫酷的动图,我当时直接忘记客户的需求了,直接在炫酷动图的海洋里尽情遨游,哈哈哈哈哈

lottie1.gif

后面客户在群里疯狂艾特我才回过神来.

使用方法

Github

首先你要去Github上导入相应的依赖,对了,现在最新版本是4.2.0

implementation 'com.airbnb.android:lottie:4.2.0'

导入完毕后直接在xml中声明就好啦!

image.png

```

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

```

然后我们就去网站下载我们心爱的加载图,将其放入我们的assets文件夹下

image.png

接下来就是在Activity中设置相应的属性了,不过在xml中也可以

image.png

``` class LottieActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_lottie) val inflate = findViewById(R.id.lottie);

    //设置资源文件,默认加载assets
    inflate.setAnimation("test.json")
    //设置动画重复次数
    inflate.repeatCount = ValueAnimator.INFINITE
    //开始
    inflate.playAnimation()

}

} ```

哈哈哈哈哈,就这么一屁点代码

XML中设置

```

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:lottie_loop="true"
    app:lottie_fileName="test.json"
    app:lottie_autoPlay="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

```

lottie_autoPlay 表示是不是自动播放 lottie_fileName 文件名称 lottie_loop 是否循环

效果

lottie2.gif

使用超级简单,而且有很多人正在上传新的动画,更多官方的API大家移步下面的链接

Lottie官方