📜  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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!