Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

A few days ago, the client felt that the loading animation of our project was not good and wanted to change it. I went to…. at that time Lost his temper, alas, the client is ye. Open the whole bar, anyway, is a GIF, if it is dictation let UI do a, I directly reported to work for 2 days, said that this if the design is not perfect for our performance has a very big obstacle. Heh heh, actually want to touch the fish.

Then the customer sent out a dynamic diagram

You also don't say, really good look, much better than our default chrysanthemum, when I happy application found that he has a default white background, after looking for a customer to a GIF without a white background, the customer directly dumped a website

link

After entering the site, I found a website with so many cool GIfs. I forgot the needs of customers and swam in the sea of cool GIFs

I didn't get my head around it until the client went nuts in the crowd.

Method of use

Github

The first thing you need to do is go to Github and import the corresponding dependencies. Oh, and the latest version is 4.2.0

Implementation 'com. Reality. The android: Lottie: 4.2.0'Copy the code

After importing it, declare it in XML.

<? The 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>Copy the code

Then we go to the website and download our favorite loading image and put it in our Assets folder

The next step is to set the corresponding properties in the Activity, but you can also set them in XML

class LottieActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_lottie) val inflate = findViewById<LottieAnimationView>(R.id.lottie); {inflate.setAnimation("test.json")} {inflate.repeatcount = valueanimator.infinite // start inflate.playAnimation() } }Copy the code

Ha, ha, ha, ha, ha, ha, ha, ha

Set in the XML

<? The 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>Copy the code
Lottie_autoPlay Indicates whether to automatically play lottie_fileName Indicates the file name. Lottie_loop Indicates whether to loopCopy the code

The effect

It's super easy to use and there are a lot of people who are uploading new animations. For more official apis check out the link below

Lottie official