Flutter – Lottie 动画

📌 相关文章

📜 Flutter – Lottie 动画

📅 最后修改于: 2021-09-02 05:35:31 🧑 作者: Mango

可视化是任何应用程序的组成部分。动画可以高度美化应用程序的 UI，但为应用程序实现动画可能很忙。这就是 Lottie 动画的用武之地。Lottie是一个基于 JSON 的动画文件。它既可以用作整个平台的网络资产，也可以用作静态资产。

在本文中，我们将研究 Lottie 动画在flutter应用程序中的实现。您可以从这里选择各种 Lottie 文件。

以下是一些常用的 Lottie 动画属性：

Animate：此属性控制动画的运动。
反转：顾名思义，用于反转动画的运动。
重复：顾名思义，用于多次重复动画。

让我们构建一个简单的flutter应用程序结构并将 Lottie 动画导入其中。为此，请执行以下步骤：

将 Lottie 依赖添加到pubspec.yaml文件中
创建一个dart文件(比如， lottie_page )
将 Lottie 包导入到lottie_page。dart文件
将资产添加到 pubspec.yaml 文件中
启用AndroidX

现在，让我们详细讨论上述步骤。

添加 Lottie 依赖项：

打开pubspec.yaml文件并添加如下所示的依赖项：

创建dart文件并导入依赖项：

将依赖项导入到 lottie_page。 dart文件，请使用以下内容：

import 'package:lottie/lottie.dart';

添加资产：

要在Flutter使用资产，您需要在pubspec.yaml文件中启用相同的资产，如下所示：

启用 AndroidX：

要启用 AndroidX，请将以下内容添加到gradle属性中，如下所示：

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

现在编码部分开始。打开 lottie_page。 dart文件并添加以下代码：

src/lib/lottie_page。dart

Dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
  
  
class LottiePage extends StatefulWidget {
  @override
  _LottiePageState createState() => _LottiePageState();
}
  
class _LottiePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Lottie.network(
                  'https://assets1.lottiefiles.com/private_files/lf30_QLsD8M.json',
                height: 200.0,
                repeat: true,
                reverse: true,
                animate: true,
              ),
  
              Lottie.network(
                  'https://assets1.lottiefiles.com/private_files/lf30_yQtj4O.json',
                  repeat: true,
                  reverse: true,
                  animate: true,
              ),
            ],
          ),
        ),
    );
  }
}

Dart

import 'package:flutter/material.dart';
import 'package:flutter_lottie_animation_demo/splash_screen.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //theme: ThemeData.dark(),
      home: Splash(),
    );
  }
}

现在导入 lottie_page。 dart文件在dart文件中。 dart文件如下图所示：

源代码/库/主。dart

Dart

import 'package:flutter/material.dart';
import 'package:flutter_lottie_animation_demo/splash_screen.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //theme: ThemeData.dark(),
      home: Splash(),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?