Android 中的 Lottie 動畫入門

增強(qiáng)應(yīng)用程序的用戶體驗是任何開發(fā)人員的首要任務(wù)之一。與圖像和文本描述相比，為某些描述提供動畫總是可以增強(qiáng)應(yīng)用程序的用戶體驗！

Lottie是用于移動應(yīng)用程序的庫之一，有助于以更簡單的方式提供動畫。如何開始在 Android 中使用 Lottie 動畫？讓我們深入閱讀這篇文章并理解這一點(diǎn)。

今天，我們將學(xué)習(xí)并構(gòu)建它。


與往常一樣，我們將在示例項目的幫助下快速理解這一點(diǎn)。

創(chuàng)建項目

  • 啟動一個新的 Android Studio 項目
  • 選擇空活動和下一步
  • 名稱：任你選擇
  • 套餐名稱：任君選擇
  • 語言：Kotlin
  • 結(jié)束
  • 你的開始項目現(xiàn)在準(zhǔn)備好了

讓我們在應(yīng)用級別的 build.gradle 文件中添加所需的 Lottie 動畫依賴項：

//Lottie Animation
implementation 'com.airbnb.android:lottie:3.4.0'

在繼續(xù)項目之前，我們必須從https://lottiefiles.com/中選擇所需的動畫。我們可以在搜索欄中輸入類別，選擇相應(yīng)的動畫，然后下載文件的 JSON 版本。


現(xiàn)在在我們的項目中創(chuàng)建一個資產(chǎn)文件夾。

項目結(jié)構(gòu)中的assets目錄應(yīng)該放在src目錄下。

將所有必需的下載 JSON文件添加到此資產(chǎn)文件夾。


現(xiàn)在，一旦我們創(chuàng)建了項目，我們就知道我們有兩個文件 MainActivity.kt 和 activity_main.kt。

讓我們從我們的activity_main.kt文件開始：

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_headline"
        app:layout_constraintBottom_toTopOf="@+id/lav_main"
        android:layout_marginTop="16dp"
        android:text="Steps to follow during this CoronaVirus Quarantine!"
        android:textSize="24sp"
        android:textStyle="bold"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lav_main"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="fight_coronavirus.json"
        app:lottie_loop="false"
        app:lottie_speed="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/layout_click"
        app:layout_constraintTop_toBottomOf="@id/tv_headline" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layout_click"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/lav_main">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lav_click_left"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            app:lottie_autoPlay="true"
            android:visibility="gone"
            app:lottie_fileName="left_arrow.json"
            app:lottie_loop="true"
            app:lottie_speed="1" />

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lav_click_right"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="100dp"
            app:lottie_autoPlay="true"
            app:lottie_fileName="right_arrow.json"
            app:lottie_loop="true"
            app:lottie_speed="1" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

在此示例中，我們有一個基本 UI，其中包含

  • 作為標(biāo)題的文本視圖
  • 通過動畫描述文本視圖內(nèi)容的 LottieAnimationView
  • 用于導(dǎo)航的左右按鈕。

我們可以從 activity_main.xml 中看到，需要添加到 Lottie Animation 視圖中的文件是通過屬性完成的：

//The json file added to the assets directory
app:lottie_fileName="filename.json"

現(xiàn)在，讓我們更新MainActivity.kt文件：

package com.mindorks.lottieanimation

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.lav_click_left
import kotlinx.android.synthetic.main.activity_main.lav_click_right
import kotlinx.android.synthetic.main.activity_main.lav_main
import kotlinx.android.synthetic.main.activity_main.tv_headline

class MainActivity : AppCompatActivity() {

    private var count: Int = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initListeners()
    }

    private fun initListeners() {
        lav_click_right.setOnClickListener {
            count++
            showStep(count = if (count > 4 ) 4 else count)
        }
        lav_click_left.setOnClickListener {
            count--
            showStep(count = if (count < 0 ) 0 else count)
        }
    }

    private fun showStep(count: Int) {
        when (count) {
            0 -> {
                setFooter(
                    isLeftVisible = false,
                    isRightVisible = true
                )
                setStepContent(
                    header = "Steps to follow during this CoronaVirus Quarantine!",
                    lottieAnimationFile = "fight_coronavirus.json"
                )
            }
            1 -> {
                setFooter(
                    isLeftVisible = true,
                    isRightVisible = true
                )
                setStepContent(header = "1\. Maintain Social Distancing!", lottieAnimationFile = "social_distancing.json")
            }
            2 -> {
                setFooter(
                    isLeftVisible = true,
                    isRightVisible = true
                )
                setStepContent(header = "2\. Stay Home, Stay Safe!", lottieAnimationFile = "stay_safe.json")
            }
            3 -> {
                setFooter(
                    isLeftVisible = true,
                    isRightVisible = true
                )
                setStepContent(header = "3\. Wash/Sanatize your hands!", lottieAnimationFile = "sanatize.json")
            }
            4 -> {
                setFooter(
                    isLeftVisible = true,
                    isRightVisible = false
                )
                setStepContent(header = "4\. Learn/Upgrade your skill set!", lottieAnimationFile = "learn.json")
            }
        }
    }

    private fun setStepContent(header: String, lottieAnimationFile: String) {
        tv_headline.text = header
        lav_main?.apply {
            setAnimation(lottieAnimationFile)
            repeatCount = 5
            playAnimation()
        }
    }

    private fun setFooter(
        isLeftVisible: Boolean,
        isRightVisible: Boolean
    ) {
        lav_click_left?.apply {
            visibility = if (isLeftVisible) View.VISIBLE else View.GONE
        }
        lav_click_right?.apply {
            visibility = if (isRightVisible) View.VISIBLE else View.GONE
        }

    }
}

理解示例中的邏輯

  • 此示例顯示了在 Covid-19 隔離期間需要遵循的基本步驟。
  • 默認(rèn)情況下（在初始啟動時），左箭頭視圖可見性設(shè)置為 GONE，因為用戶尚未開始導(dǎo)航
  • 我們在 MainActivity.kt 文件中維護(hù)一個名為“count”的變量，初始化為零。
  • 我們正在通過處理左右箭頭的點(diǎn)擊來更新 count 的值、左右按鈕的可見性、文本視圖和 LottieAnimation 視圖的內(nèi)容更改
lav_click_right.setOnClickListener {
            count++
            showStep(count = if (count > 4 ) 4 else count)
        }
        lav_click_left.setOnClickListener {
            count--
            showStep(count = if (count < 0 ) 0 else count)
        }
  • 使用更新的計數(shù)參數(shù)調(diào)用showStep方法。此方法在內(nèi)部調(diào)用 setStepContent 和 setFooter 方法來更新 UI
private fun showStep(count: Int)
  • setStepContent方法有助于設(shè)置標(biāo)題（文本視圖）的值并更新 Lottie 動畫視圖
private fun setStepContent(header: String,  lottieAnimationFile:String)
  • setFooter方法有助于處理左右箭頭
private fun setFooter(isLeftVisible: Boolean,isRightVisible:Boolean)

我們現(xiàn)在都準(zhǔn)備好了代碼。讓我們在任何設(shè)備上運(yùn)行這個應(yīng)用程序，看看 Lottie Animation 是如何工作的！

LottieAnimationViews 屬性

LottieAnimation 視圖有很多屬性，我們可以通過這些屬性控制視圖的動畫。項目中使用的一些是

  • “l(fā)ottie_autoPlay” 布爾值，用于控制自動播放功能
app:lottie_autoPlay="true"
  • “l(fā)ottie_loop” 布爾值，用于控制動畫的循環(huán)
app:lottie_loop="false"
  • “l(fā)ottie_speed” 浮動控制動畫的速度
app:lottie_speed="1"

接下來是什么？

您可以克隆此項目并嘗試以下操作：

  • 涉及到一些業(yè)務(wù)邏輯。所以你可以為這個項目定義一個架構(gòu)
  • 您可以在 Covid-19 隔離期間添加更多要遵循的步驟
  • 您可以即興創(chuàng)作 UI
  • 您可以探索 LottieAnimationViews 的不同屬性并學(xué)習(xí)以編程方式設(shè)置它們，以保持應(yīng)用程序動態(tài)

還有很多...

作者：Dheeraj Sree
鏈接：Getting started with Lottie Animation in Android

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容