📜  如何在 Android 应用中添加 Lottie 动画

📅  最后修改于: 2022-05-13 01:54:38.966000             🧑  作者: Mango

如何在 Android 应用中添加 Lottie 动画

本文是关于通过将Lottie 动画文件添加到我们的移动应用程序中来增强移动应用程序的用户界面。 Lottie 动画可免费使用矢量动画文件。这些动画文件可以在官方网站上找到。许多著名的应用程序都使用它,例如 Uber、Netflix、Google、Airbnb、Shopify 等。
下面是一个 Lottie 动画的例子:

Lottie 动画的动态属性

  • 这些可用于为应用程序提供主题。
  • 可以添加这些以响应任何事件,例如错误、成功等。
  • 这些可以为响应任何用户的动画的单个部分制作动画。
  • 响应设计时未知的视图大小或其他值。

乐蒂的优势

  • 它支持更多的 After Effects 功能。
  • 开发者可以设置进度,将动画添加到手势、事件等。
  • 蒙版是抗锯齿的。
  • 开发人员可以自由地动态更改动画特定部分的速度和颜色。

方法:
步骤1:将此依赖添加到项目的App级gradle模块中,然后将gradle与项目同步。这个库使我们能够使用 Lottie 的动画:

Java
// Lottie dependency
def lottieVersion = "3.4.0" implementation "com.airbnb.android:lottie:$lottieVersion"


XML


Java
// Custom animation speed or duration.
ValueAnimator animator
    = ValueAnimator.ofFloat(0f, 1f);
animator
    .addUpdateListener(animation -> {
        animationView
            .setProgress(
                animation
                    .getAnimatedValue());
    });
animator.start();


Java
// Declaring the animation view
LottieAnimationView animationView
    = findViewById(R.id.animationView);
animationView
    .addAnimatorUpdateListener(
        (animation) -> {
            // Do something.
        });
animationView
    .playAnimation();
 
if (animationView.isAnimating()) {
    // Do something.
}


第 2 步:从此处选择任意动画并下载动画的 JSON 文件

下载 JSON 动画文件

第 3 步:现在将 XML 代码包含到要显示动画的布局文件中。这里假设 JSON 文件的文件名是动画。 Lottie 获取 JSON 文件的不同方法

  • 一个 JSON 动画: src/main/res/raw
  • 一个 JSON 文件: src/main/assets
  • 一个 zip 文件: src/main/assets

下面是 XML 代码:

XML


第 4 步:(可选)向动画添加控件:

  • 添加自定义进度:此处自定义进度的初始值和最终值。

Java

// Custom animation speed or duration.
ValueAnimator animator
    = ValueAnimator.ofFloat(0f, 1f);
animator
    .addUpdateListener(animation -> {
        animationView
            .setProgress(
                animation
                    .getAnimatedValue());
    });
animator.start();

  • 添加动画侦听器:可以使用抽签动画添加不同的侦听器。

Java

// Declaring the animation view
LottieAnimationView animationView
    = findViewById(R.id.animationView);
animationView
    .addAnimatorUpdateListener(
        (animation) -> {
            // Do something.
        });
animationView
    .playAnimation();
 
if (animationView.isAnimating()) {
    // Do something.
}

输出:

参考:https://github.com/airbnb/lottie-android