Flutter-视频系列--图解动画小插曲之-Lottie-动画

Lottie 是 Airbnb 开发的一款可以在移动设备上播放 Adobe After Effects 动画的开源库，可以用来在 Flutter 应用中实现复杂的动画。

在 Flutter 中使用 Lottie 动画，首先需要添加 lottie 包依赖，然后使用 Lottie 控件。

1. 添加依赖

   在 pubspec.yaml 文件中添加 lottie 包依赖：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^0.7.0

2. 使用 Lottie 控件

   在 Flutter 中使用 Lottie 控件，如下所示：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset('assets/lottie/your_animation.json'),
      ),
    );
  }
}

在这个例子中，我们使用了 Lottie.asset 方法来加载位于 assets/lottie/ 目录下的 your_animation.json 文件。

注意：Lottie 动画的 JSON 文件需要你从设计师那里获取，并放在项目的 assets 文件夹下。

3. 配置 pubspec.yaml

   在 pubspec.yaml 文件中，需要配置 assets 文件夹路径：

flutter:
  assets:
    - assets/lottie/

以上就是在 Flutter 中使用 Lottie 动画的基本步骤。