Android 中的 Lottie 动画入门

2022-07-17 本文已影响0人安安_660c

增强应用程序的用户体验是任何开发人员的首要任务之一。与图像和文本描述相比，为某些描述提供动画总是可以增强应用程序的用户体验！

Lottie是用于移动应用程序的库之一，有助于以更简单的方式提供动画。如何开始在 Android 中使用 Lottie 动画？让我们深入阅读这篇文章并理解这一点。

今天，我们将学习并构建它。

与往常一样，我们将在示例项目的帮助下快速理解这一点。

创建项目

启动一个新的 Android Studio 项目
选择空活动和下一步
名称：任你选择
套餐名称：任君选择
语言：Kotlin
结束
你的开始项目现在准备好了

让我们在应用级别的 build.gradle 文件中添加所需的 Lottie 动画依赖项：

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

在继续项目之前，我们必须从https://lottiefiles.com/中选择所需的动画。我们可以在搜索栏中输入类别，选择相应的动画，然后下载文件的 JSON 版本。

现在在我们的项目中创建一个资产文件夹。

项目结构中的assets目录应该放在src目录下。

将所有必需的下载 JSON文件添加到此资产文件夹。

现在，一旦我们创建了项目，我们就知道我们有两个文件 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，其中包含

作为标题的文本视图
通过动画描述文本视图内容的 LottieAnimationView
用于导航的左右按钮。

我们可以从 activity_main.xml 中看到，需要添加到 Lottie Animation 视图中的文件是通过属性完成的：

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

现在，让我们更新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 隔离期间需要遵循的基本步骤。
默认情况下（在初始启动时），左箭头视图可见性设置为 GONE，因为用户尚未开始导航
我们在 MainActivity.kt 文件中维护一个名为“count”的变量，初始化为零。
我们正在通过处理左右箭头的点击来更新 count 的值、左右按钮的可见性、文本视图和 LottieAnimation 视图的内容更改

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)
        }

使用更新的计数参数调用showStep方法。此方法在内部调用 setStepContent 和 setFooter 方法来更新 UI

private fun showStep(count: Int)

setStepContent方法有助于设置标题（文本视图）的值并更新 Lottie 动画视图

private fun setStepContent(header: String,  lottieAnimationFile:String)

setFooter方法有助于处理左右箭头

private fun setFooter(isLeftVisible: Boolean,isRightVisible:Boolean)

我们现在都准备好了代码。让我们在任何设备上运行这个应用程序，看看 Lottie Animation 是如何工作的！

LottieAnimationViews 属性

LottieAnimation 视图有很多属性，我们可以通过这些属性控制视图的动画。项目中使用的一些是

“lottie_autoPlay” 布尔值，用于控制自动播放功能

app:lottie_autoPlay="true"

“lottie_loop” 布尔值，用于控制动画的循环

app:lottie_loop="false"

“lottie_speed” 浮动控制动画的速度

app:lottie_speed="1"

接下来是什么？

您可以克隆此项目并尝试以下操作：

涉及到一些业务逻辑。所以你可以为这个项目定义一个架构
您可以在 Covid-19 隔离期间添加更多要遵循的步骤
您可以即兴创作 UI
您可以探索 LottieAnimationViews 的不同属性并学习以编程方式设置它们，以保持应用程序动态

还有很多...

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

Android 中的 Lottie 动画入门

理解示例中的逻辑

LottieAnimationViews 属性

接下来是什么？

猜你喜欢

热点阅读