Little knowledge, big challenge! This article is participating in the creation of " Programmers' Essential Knowledge "
This article has participated in the "Exploitation Star Program" to win creative gift packages and challenge creative incentives.
A few days ago, the client thought that the loading animation of our project was not very good-looking, and wanted to change it. At that time, I lost my temper, alas, the client is the master. Let’s make it straight, anyway, it’s a GIF if it’s dictation. To make a UI, I directly reported to work for 2 days, indicating that if the design is not perfect, it will greatly hinder our performance. Hehe, I actually want to fish.
后面客户果不其然发了一个动态图
你还别说,真挺好看,比我们默认的菊花好看多了,当我快乐的应用上去时发现他有一块默认的白色背景,后面找客户再要一个没有白色背景的GIF时客户直接甩了一个网址
进去之后发现是一个网站,里面超多炫酷的动图,我当时直接忘记客户的需求了,直接在炫酷动图的海洋里尽情遨游,哈哈哈哈哈
后面客户在群里疯狂艾特我才回过神来.
Instructions
First, you need to import the corresponding dependencies on Github. By the way, the latest version is now 4.2.0
implementation 'com.airbnb.android:lottie:4.2.0'
导入完毕后直接在xml中声明就好啦!
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".lottie.LottieActivity">
<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"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
然后我们就去网站下载我们心爱的加载图,将其放入我们的assets文件夹下
接下来就是在Activity中设置相应的属性了,不过在xml中也可以
class LottieActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_lottie)
val inflate = findViewById<LottieAnimationView>(R.id.lottie);
//设置资源文件,默认加载assets
inflate.setAnimation("test.json")
//设置动画重复次数
inflate.repeatCount = ValueAnimator.INFINITE
//开始
inflate.playAnimation()
}
}
哈哈哈哈哈,就这么一屁点代码
set in XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".lottie.LottieActivity">
<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"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
lottie_autoPlay 表示是不是自动播放
lottie_fileName 文件名称
lottie_loop 是否循环
Effect
使用超级简单,而且有很多人正在上传新的动画,更多官方的API大家移步下面的链接