使用Kotlin在Android中制作Lottie动画的初级指南

DebugUsery
900 阅读4分钟

使用Kotlin在Android中制作Lottie动画的初学者指南

对大多数开发者来说，设计动画是一件很繁琐的技术活。Lottie是一个开源的动画库，由Airbnb开发。它用BodyMovin渲染了Adobe After Effects。

BodyMovin是一个Adobe After Effects插件，可以将动画导出为JSON文件。Lottie使人们可以轻松地处理动画，而无需下载沉重的动画文件。

它可以帮助开发者实现简洁的用户界面，从而达到良好的用户体验。Lottie很容易使用，而且可以在他们的网站上访问文件。Lottie支持移动（Android、iOS和React Native）、网络和桌面应用程序。

为什么使用Lottie

  • 简单的UI元素：Lottie很轻，导出的JSON文件尺寸也很小。
  • 动态场景：你可以在几个镜头中讲述一个故事，使其成为互动的。
  • 随意改变动画：Lottie提供的动画可以从速度、颜色到进度进行改变，从而满足开发者的需求。
  • 改善用户体验。
  • 在所有的移动设备（在我们的例子中）上都能很好地搭配，甚至是性能较慢的设备，因为它是轻量级的。
  • 动画也有一个清晰的分辨率。

前提条件

读者应该具备

  • 有开发Android应用程序的基本知识。
  • 对Kotlin编程语言有扎实的了解。
  • 安装了Android Studio。

目标

在本教程结束时，读者应了解如何在Android应用程序中使用和实现Lottie动画。

由于该项目有点宽泛，我们将只在应用程序上进行Lottie动画的所有基础知识。

第一步：创建一个新的Android Studio项目

打开Android Studio，选择创建新项目->空活动，然后点击下一步。填写所需的字段并点击完成。

第二步：选择一个动画文件在你的应用程序上使用

前往Lottie的网站，选择你选择的动画。大多数动画是免费的，而其他动画则需要付费才能使用。

下载.json文件。在我们的项目中，让我们创建一个res/raw文件夹。把.json动画保存在那里。在你的安卓项目中，创建一个res/raw 文件夹。右键点击res文件夹，选择新建->资源包并命名为raw 。将.json动画保存在该文件夹中。

第三步：在项目中添加Lottie依赖项

在build. gradle （项目层面），添加Lottie动画库。确保你检查出最新的库版本并同步修改。

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

第四步：设计项目的布局

在这一步，我们将设计我们应用程序的布局。该布局将只有三个基本元素。

  • 一个文本视图包含一个标题。
  • 按钮将被用于导航。
  • LottieAnimationView。
LottieAnimationView

视图的添加就像布局中的其他元素一样。你会遇到的一些属性如下。

  • lottie_loop - 一个布尔值，以确保动画保持循环状态。
  • lottie_speed - 这决定了动画的速度。
  • lottie_autoplay - 一个布尔值，用于启动动画。
  • lottie_url - 来自网站的JSON URL。

如果你想让你的动画依赖于互联网，你可以使用官方网站上的动画的json URL。为你的应用程序节省空间，但它不能离线工作。该文件很小，所以建议下载它。

  • lottie_rawRes - 这包含了你应用程序上的捆绑动画。
  • lottie_fileName - 如果你已经把JSON文件添加到assets文件夹中，使用这个文件而不是 。lottie_rawRes
<?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"
android:layout_marginTop="@dimen/margin_16">
  
<TextView
android:id="@+id/titleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textColor="@color/dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
  
<TextView
android:id="@+id/subTitleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
android:textColor="@color/dark"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/titleTv"/>
  
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.4"
app:lottie_loop="true"
app:lottie_speed="1"
tools:ignore="ContentDescription"/>
  
<TextView
android:id="@+id/descTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="@color/dark"
app:layout_constraintEnd_toEndOf="@+id/img"
app:layout_constraintStart_toStartOf="@+id/img"
app:layout_constraintTop_toBottomOf="@+id/img"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>

你也可以通过MainActivity.kt "以编程方式 "加载动画。

val animationView:LottieAnimationView = findViewById(R.id.animation_view)
animationView.setAnimation("hello-world.json")
animationView.loop(true)
animationView.playAnimation()

这个函数将加载文件并解析动画。

第五步：给应用程序添加功能。

由于我们使用一个适配器来显示动画的内容，在你的适配器的bind 函数中写下以下代码。

fun bind(onBoardingPage: OnboardingPage) {
val res = root.context.resources
root.titleTv?.text = res.getString(onBoardingPage.titleResource)
root.subTitleTv?.text = res.getString(onBoardingPage.subTitleResource)
root.descTV?.text = res.getString(onBoardingPage.descriptionResource)
root.img.setAnimation(onBoardingPage.logoResource)
root.img. playAnimation()
}
  • .setAnimation - 这将原始动画设置到图像视图中。
  • .playAnimation() - 这样就可以播放动画了。

接下来，在你的Mainctivity.kt 中创建一个setupAnimation 函数并添加以下内容。

fun setupAnimation(){
val animation = findViewById<LottieAnimationView>(R.id.progressBar)
animation.speed = 2.0F // How fast does the animation play
animation.progress = 50F // Starts the animation from 50% of the beginning
animation.addAnimatorUpdateListener {
// Called every time the frame of the animation changes
}
animation.repeatMode = LottieDrawable.RESTART // Restarts the animation (you can choose to reverse it as well)
animation.cancelAnimation() // Cancels the animation
}
  • .speed - 来设置动画的播放速度。
  • .progress - 要选择动画开始的位置。
  • .repeatMode - 重新启动动画。

遇到的错误

当使用像这样一个保存动画文件的类时。

enum class OnboardingPage(
@StringRes val titleResource: Int,
@StringRes val subTitleResource: Int,
@StringRes val descriptionResource: Int,
@DrawableRes val logoResource: Int
) {
ONE(R.string.onboarding_slide1_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.comp),
TWO(R.string.onboarding_slide2_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.jump),
THREE(R.string.onboarding_slide3_title, R.string.onboarding_slide1_subtitle,R.string.onboarding_slide1_desc, R.raw.cycling)
}

你可能会在适配器中遇到一个lint错误，在这一行。

root.img.setAnimation(onBoardingPage.logoResource).

如果你添加了@SuppressLint 注解，项目将无法运行。这个错误不一定影响应用程序的功能。

输出

让我们来运行这个应用程序。

App gif

avatar
文章
阅读
粉丝