Flutter动画播放插件lottie_tgs的使用

Flutter 动画播放插件 lottie_tgs 的使用

Lottie 是一个适用于 Android 和 iOS 的移动库，它可以解析使用 Bodymovin 导出为 JSON 格式的 Adobe After Effects 动画，并在移动设备上进行原生渲染！

支持 Telegram 贴纸（tgs）格式

此存储库是 Lottie-android 库的非官方 Dart 版本。

它支持 Android、iOS、macOS、Linux、Windows 和 Web 平台。

使用方式

简单动画

以下示例展示了如何以最简单的方式显示 Lottie 动画。Lottie 小部件将加载 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](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // 从您的资源中加载 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 来完全控制动画。通过自定义的 AnimationController，您可以使用丰富的 API 控制动画的播放方式：按需开始和停止动画，正向或反向播放，循环到特定点等。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/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();
              },
            ),
          ],
        ),
      ),
    );
  }
}

控制小部件的大小

Lottie 小部件在控制其大小方面与 Image 小部件具有相同的参数和行为。

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

width 和 height 是可选的，如果没有指定，则会根据父容器的大小或 Lottie 动画的固有大小来决定。

自定义加载

Lottie 小部件提供了几个方便的构造函数（Lottie.asset、Lottie.network、Lottie.memory），可以自动加载、解析和缓存 JSON 文件。

有时您可能希望对文件的加载过程拥有完全控制权。可以使用 AssetLottie（或 NetworkLottie、MemoryLottie）从 JSON 文件加载 Lottie 组合。

此示例展示了如何从 JSON 文件加载和解析 Lottie 组合。

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

  [@override](/user/override)
  State<MyWidget> createState() => _MyWidgetState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();

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

  [@override](/user/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());
        }
      },
    );
  }
}

自定义绘制

此示例深入底层，展示如何在特定帧、特定位置和大小的自定义画布上绘制 LottieComposition。

class CustomDrawer extends StatelessWidget {
  final LottieComposition composition;

  const CustomDrawer(this.composition, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _Painter(composition),
      size: const Size(400, 400),
    );
  }
}

class _Painter extends CustomPainter {
  final LottieDrawable drawable;

  _Painter(LottieComposition composition)
      : drawable = LottieDrawable(composition);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    var frameCount = 40;
    var columns = 10;
    for (var i = 0; i < frameCount; i++) {
      var destRect = Offset(i % columns * 50.0, i ~/ 10 * 80.0) & (size / 5);
      drawable
        ..setProgress(i / frameCount)
        ..draw(canvas, destRect);
    }
  }

  [@override](/user/override)
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

在运行时修改属性

此示例展示了如何在运行时修改动画的一些属性。这里我们更改了一些图层的文本、颜色、不透明度和位置。对于每个 ValueDelegate，我们可以提供静态的 value 或计算每个帧值的 callback。

class _Animation extends StatelessWidget {
  [@override](/user/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),
          ),
        ],
      ),
    );
  }
}