Flutter动画渲染插件lottie_native的使用

lottie_native 是一个用于在Flutter应用中渲染Lottie动画的插件，它利用了原生平台的库来实现动画渲染。

使用的原生平台库

• iOS: lottie-ios
• Android: lottie-android

这个插件是从 flutter_lottie 分叉而来的。

示例代码

以下是一个完整的示例demo，展示了如何使用 lottie_native 插件来加载和控制Lottie动画。

完整示例代码

import 'dart:async';

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

// 假设PageDragger是自定义的拖动页面组件
import 'page_dragger.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  LottieController? controller;
  LottieController? controller2;
  late StreamController<double> newProgressStream;

  // 构造函数初始化StreamController
  _MyAppState() {
    newProgressStream = new StreamController<double>();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageDragger(
        stream: this.newProgressStream,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Lottie'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                SizedBox(
                  width: 150,
                  height: 150,
                  child: LottieView.fromURL(
                    url:
                        'https://raw.githubusercontent.com/airbnb/lottie-ios/master/Tests/Samples/Watermelon.json',
                    autoPlay: true, // 自动播放
                    loop: true, // 循环播放
                    reverse: true, // 反向播放
                    onViewCreated: onViewCreated, // 视图创建完成后的回调
                  ),
                ),
                TextButton(
                  child: Text("Play"),
                  onPressed: () {
                    controller?.play(); // 播放动画
                  },
                ),
                TextButton(
                  child: Text("Stop"),
                  onPressed: () {
                    controller?.stop(); // 停止动画
                  },
                ),
                TextButton(
                  child: Text("Pause"),
                  onPressed: () {
                    controller?.pause(); // 暂停动画
                  },
                ),
                TextButton(
                  child: Text("Resume"),
                  onPressed: () {
                    controller?.resume(); // 继续播放动画
                  },
                ),
                Text("From File"), // 从文件加载动画
                Container(
                  child: SizedBox(
                    width: 150,
                    height: 150,
                    child: LottieView.fromAsset(
                      filePath: "animations/newAnimation.json", // 文件路径
                      autoPlay: true, // 自动播放
                      loop: true, // 循环播放
                      reverse: true, // 反向播放
                      onViewCreated: onViewCreatedFile, // 视图创建完成后的回调
                    ),
                  ),
                ),
                TextButton(
                  child: Text("Change Color"), // 改变颜色
                  onPressed: () {
                    // 设置KeyPath的颜色
                    this.controller2?.setValue(
                          value: LOTColorValue.fromColor(
                            color: Color.fromRGBO(0, 0, 255, 1),
                          ),
                          keyPath: "body Konturen.Gruppe 1.Fläche 1",
                        );
                    // 设置KeyPath的透明度
                    this.controller2?.setValue(
                          value: LOTOpacityValue(opacity: .1),
                          keyPath: "body Konturen.Gruppe 1.Fläche 1",
                        );
                  },
                ),
                Text("Drag anywhere to change animation progress"), // 拖动以改变动画进度
              ],
            ),
          ),
        ),
      ),
    );
  }

  void onViewCreated(LottieController controller) {
    this.controller = controller;

    // 监听播放完成事件
    controller.onPlayFinished.listen((bool animationFinished) {
      print("Playback complete. Was Animation Finished? $animationFinished");
    });
  }

  void onViewCreatedFile(LottieController controller) {
    this.controller2 = controller;
    newProgressStream.stream.listen((double progress) {
      this.controller2?.setAnimationProgress(progress); // 设置动画进度
    });
  }

  void dispose() {
    super.dispose();
    newProgressStream.close(); // 关闭StreamController
  }
}