flutter flare动画

flare动画编辑器：https://rive.app/
flutter flare项目地址：https://github.com/2d-inc/Flare-Flutter

Flare动画基本使用

在pubspec.yaml文件中添加依赖和静态资源：

dependencies:
  flutter:
    sdk: flutter
  flare_flutter: ^1.8.3 #添加此依赖
flutter:
  assets:
    - assets/  #添加静态资源文件夹

动画文件地址：https://rive.app/a/pollux/files/flare/success-check/preview 直接导出即可。
在项目根目录创建assets文件夹，放入自己的动画文件

main.dart

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart'; //导入FlareActor包
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Demo',
      home: Scaffold(
        body: FlareActor(
          'assets/finish_anim.flr',
          animation: 'Untitled',  #Untitled是动画的名字，是制作动画时设定的
          )
      ),
    );
  }
}

效果：

修改颜色

1. 使用color参数设置动画的颜色，这样只能使动画保持一种颜色。
   修改代码：

   FlareActor(
         'assets/finish_anim.flr',
         animation: 'Untitled',
         color: Colors.blue,
         )
   

   效果：
   
2. 添加controller控制动画的颜色

import 'package:flare_dart/math/mat2d.dart';
import 'package:flare_flutter/flare.dart';
import 'package:flare_flutter/flare_controller.dart';
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

List presetColors = [ //预置颜色
  Colors.green,
  Colors.red,
  Colors.yellow,
  Colors.blue,
  Colors.pink,
  Colors.black
];

class MyAppState extends State with FlareController {
  FlutterColorFill _fill; //用于绑定要变化的区域
  int _counter = 0; //计数器

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Demo',
      home: Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                _counter++;
              });
            },
            child: Icon(Icons.add),
          ),
          body: FlareActor(
            'assets/finish_anim.flr',
            animation: 'Untitled',
            controller: this, //绑定控制器
          )),
    );
  }

  @override
  // 这个方法在画板重绘之前调用
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    Color nextColor = presetColors[_counter % presetColors.length];
    if (_fill != null) {
      _fill.uiColor = nextColor;
    }
    return true;
  }

  @override
  // 初始化方法，可以在这里获取动画中的结点
  void initialize(FlutterActorArtboard artboard) {
    FlutterActorShape shape =
        artboard.getNode('Green Ellipse'); //Green Ellipse是动画中的图形名称
    _fill = shape?.fill as FlutterColorFill;
  }

  @override
  //每一帧调用
  void setViewTransform(Mat2D viewTransform) {}
}

效果：