W tym poście dowiemy się o animacji Lottie w Androidzie za pomocą Kotlina na przykładzie. Omówimy różne przykłady atrybutów związanych z LottieFiles. Zobaczymy, jak ustawić prędkość odtwarzania animacji, załadować animację z adresu URL w aplikacji na Androida za pomocą biblioteki Lottie itp.

Zaczynaj

Lottie to biblioteka stworzona przez AirBnb, która pozwala dodawać animacje do aplikacji na Androida. Dodawanie animacji za pomocą Lottie jest bardzo łatwe i można to zrobić za pomocą zaledwie kilku linijek kodu!

LottieFiles.com zawiera tysiące darmowych animacji, które możesz wykorzystać w swoich projektach. Możesz nawet edytować kolory animacji za pomocą wbudowanego edytora na stronie. Pamiętaj, aby przyznać uznanie oryginalnym twórcom, jeśli zdecydujesz się użyć animacji LottieFiles.

Animacje można dodawać do aplikacji w plikach xml układu lub w kodzie. W tym krótkim samouczku omówię, jak dodawać animacje w obie strony.

1. Utwórz projekt

Najpierw wykonaj poniższe czynności, aby utworzyć nowy projekt.

Przejdź do Plik => Nowy => Nowy projekt . Spowoduje to otwarcie nowego okna. Następnie w sekcji Telefon i tablet wybierz Opróżnij aktywność . Następnie kliknij Dalej .

Na następnym ekranie wybierz nazwę projektu jako LottieAnimation . Następnie uzupełnij inne wymagane dane.

Następnie kliknięcie przycisku Zakończ tworzy nowy projekt.

2. Dodawanie zależności Lottie (build.gradle)

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

Kliknij przycisk Synchronizuj teraz widoczny w prawym górnym rogu Android Studio IDE.

3. Pobierz plik animacji Lottie

Teraz musimy pobrać pliki animacji, które chcemy wykorzystać w naszym projekcie. Występują w różnych formatach — JSON, ZIP, GIF itp. W tym artykule będziemy używać formatu json. Więc pobierzemy plik json.

Wykonaj poniższe czynności, aby pobrać plik animacji lottie –

Iść dohttps://lottiefiles.com/featuredi pobierz plik animacji w formacie Json.

• Teraz utwórz folder raw , jeśli nie został utworzony, w folderze src/main/res .
• Następnie przenieś pobrany plik json, którego nazwa została zmieniona na Animation.json, do folderu src/main/res/raw . Struktura folderów będzie wyglądać jak –

Do tej pory pomyślnie pobraliśmy i przenieśliśmy plik json do folderu src/main/res/raw . Teraz użyjemy pliku animacji w pliku 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=".MainActivity">
 
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/animation" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

5.1 Konfiguracja ViewBinding

Musimy skonfigurować viewBinding, abyśmy nie musieli używać funkcji findViewById() w celu uzyskania dostępu do dowolnego widoku w pliku Kotlin. Dodaj viewBinding = true w pliku app/build.gradle .

android {
  
    // OTHER CODE...
  
    buildFeatures {
        viewBinding = true
    }
}

Otwórz plik MainActivity.kt i wpisz w nim poniższy kod

package com.example.lottieanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.lottieanimation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

Zanim przejdziemy dalej, musimy usunąć niektóre atrybuty w pliku xml. Ustawimy to programowo w pliku Kotlin. Więc otwórz plik activity_main.xml i skopiuj/wklej w nim poniższy kod/

<?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=".MainActivity">
 
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Pamiętaj, że usunęliśmy animację konfiguracji w pliku xml. Teraz uruchomimy programowo tę samą animację lottie, używając kotlina.

Więc otwórz plik MainActivity.Kt. Następnie dodaj w nim poniższy kod

class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
 
        setupAnimation()
    }
 
    private fun setupAnimation() {
        binding.animationView.setAnimation(R.raw.animation)
        binding.animationView.repeatCount = LottieDrawable.INFINITE
        binding.animationView.playAnimation()
    }
}

• setAnimation() ustawia animację na LottieAnimationView
• repeatCount ustawia liczbę odtworzeń animacji
• playAnimation() odtwarza animację ustawioną w LottieAnimationView

Możemy również wykonać niektóre działania programowo w animacji Lottie, jak opisano poniżej

6.1 Wznów animację Lottie

Możemy wznowić animację lottie za pomocą metody .resumeAnimation() . Na przykład,

binding.animationView.resumeAnimation()

Jeśli chcemy ustawić prędkość odtwarzania animacji, możemy to zrobić za pomocą metody setSpeed() . Na przykład,

binding.animationView.speed = 5.0F

Jeśli chcemy ustawić animację Lottie z adresu URL, możemy to zrobić za pomocą metody setAnimationFromUrl() . Na przykład,

binding.animationView.setAnimationFromUrl("https://assets2.lottiefiles.com/packages/lf20_1mA0i9a3PH.json")

Dziękuje za przeczytanie!