Flutter动画展示插件lottie的使用

Lottie for Flutter 是一个用于在Flutter应用中展示Adobe After Effects 动画的库。这些动画通过Bodymovin导出为json格式，并在移动设备上原生渲染。以下是关于如何使用Lottie for Flutter的详细介绍和示例代码。

使用方法

简单动画

最简单的方式是直接加载一个本地或远程的json文件并播放动画。Lottie widget会自动加载JSON文件并无限循环播放动画。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // 从assets加载Lottie动画文件
            Lottie.asset('assets/LottieLogo1.json'),

            // 从网络URL加载Lottie动画文件
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

            // 从zip文件加载动画及其图片
            Lottie.asset('assets/lottiefiles/angel.zip'),
          ],
        ),
      ),
    );
  }
}

自定义 AnimationController

为了对动画有更精确的控制，可以提供自定义的AnimationController。这允许你以多种方式播放动画：例如开始和停止、正向或反向播放、在特定点之间循环等。

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Lottie.asset(
              'assets/LottieLogo1.json',
              controller: _controller,
              onLoaded: (composition) {
                // 配置AnimationController的持续时间和启动动画
                _controller
                  ..duration = composition.duration
                  ..forward();
              },
            ),
          ],
        ),
      ),
    );
  }
}

控制Widget大小

你可以像控制Image widget一样来调整Lottie widget的大小，通过设置width和height属性或者使用fit参数。

Lottie.asset(
  'assets/LottieLogo1.json',
  width: 200,
  height: 200,
  fit: BoxFit.fill,
)

自定义加载

有时你可能想要完全控制文件的加载过程。可以使用AssetLottie（或NetworkLottie，MemoryLottie）来加载Lottie composition。

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late final Future<LottieComposition> _composition;

  @override
  void initState() {
    super.initState();

    _composition = AssetLottie('assets/LottieLogo1.json').load();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<LottieComposition>(
      future: _composition,
      builder: (context, snapshot) {
        var composition = snapshot.data;
        if (composition != null) {
          return Lottie(composition: composition);
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

修改运行时属性

可以在运行时修改动画的一些属性，如文本、颜色、透明度和图层位置。

class _Animation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/Tests/Shapes.json',
      delegates: LottieDelegates(
        text: (initialText) => '**$initialText**',
        values: [
          ValueDelegate.color(
            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
            value: Colors.red,
          ),
          ValueDelegate.opacity(
            const ['Shape Layer 1', 'Rectangle'],
            callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
          ),
          ValueDelegate.position(
            const ['Shape Layer 1', 'Rectangle', '**'],
            relative: const Offset(100, 200),
          ),
        ],
      ),
    );
  }
}

帧率

默认情况下，动画按照AfterEffects导出的帧率播放。如果效果不理想，可以通过设置frameRate参数来更改帧率。

Lottie.asset('anim.json',
  frameRate: FrameRate.max, // 使用设备的最大帧率
  // 或者使用其他帧率配置...
)

以上就是Lottie for Flutter的基本用法和一些高级特性。希望这些信息能帮助你在项目中更好地利用这个强大的动画库！