Flutter – Lottie 动画

简介

Flutter 是 Google 推出的一款开源的 UI 开发框架，用于构建高性能、高保真的移动应用程序。Lottie 是由 Airbnb 开发的一个跨平台动画库，它可以将 Adobe After Effects 动画导出为 JSON 文件，然后再在移动端通过 Lottie 动画库进行解析和渲染，实现高品质动画效果。

Flutter 和 Lottie 都是现代 UI 开发框架中不可或缺的部分，它们的结合可以帮助开发者快速构建复杂的动画效果，提升用户体验。

安装 Lottie 插件

在 Flutter 中使用 Lottie，需要先将 Lottie 插件进行安装。在 pubspec.yaml 文件中添加 lottie: ^1.1.0 依赖，然后运行 flutter packages get 命令进行安装。

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

使用 Lottie 控件

Lottie 控件可以直接在 Flutter 框架中创建和使用。首先，需要将 Lottie JSON 文件添加到 Flutter 项目中，并在代码中使用 Lottie.asset 或 Lottie.network 控件进行引用。

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'assets/json/lottie_animation.json',
          width: 150,
          height: 150,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

上述代码中使用了 Lottie.asset 控件，并将 Lottie 文件名作为第一个参数传递给该控件。另外，width、height 和 fit 参数可以用于控制 Lottie 动画的大小和适配方式。

通过 Lottie 控件控制动画状态

Lottie 控件提供了一系列方法，用于控制动画的播放和停止。例如，controller 属性可以用于获取 Lottie 控件的控制器，进而通过设置 isPlaying 属性、duration 属性、repeat 属性等实现对动画播放状态的控制。

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieAnimation extends StatefulWidget {
  @override
  _LottieAnimationState createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'assets/json/lottie_animation.json',
          controller: _controller,
          onLoaded: (composition) {
            // 设置 Lottie 动画播放状态
            _controller.duration = composition.duration;
            _controller.repeat();
          },
        ),
      ),
    );
  }
}

上述代码中使用了 AnimationController 控制器，并将其与 Lottie.asset 控件进行绑定。然后，通过 onLoaded 回调方法获取到 Lottie 文件的 Composition 对象，进而通过设置控制器的属性，实现对 Lottie 动画的播放和循环控制。

总结

以上简单介绍了 Flutter 中如何使用 Lottie 动画库。当然，Lottie 动画库还有许多高级特性，如结合 Flutter 动画、使用 Lottie Web 端编辑器等，这些特性可以让开发者更加灵活地调整和优化 Lottie 动画的效果。