FlutterでFlareアニメーションを制御する

表示するまでのサンプルはあるのですが、
Controllerを作成して制御するまでの方法が見当たらなかったので、雑にまとめておきます。

前提

• flareアニメーションファイル
  ※なかったらExploreからダウンロードしてきましょう。

Flareの設定

1. プロジェクトルートのassetsフォルダにflrファイルを配置する
2. pubspecにプラグインと使用するファイルを追記する

pubspec.yaml

dependencies:
  flare_flutter:

flutter:
  assets:
    - assets/sample.flr

1. パッケージを取得する

$ flutter packages get

Flareの表示

1. 　Widgetとして適当な箇所に表示する

FlareActor(
  'assets/sample.flr',
  alignment: Alignment.center,
  fit: BoxFit.contain,
  controller: this,
)

Flareの制御

1. 表示するStateにFlareControllerを実装する

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

class _SamplePageState extends State<SamplePage> implements FlareController {
  @override
  void initialize(FlutterActorArtboard artboard) {}

  @override
  void setViewTransform(Mat2D viewTransform) {}

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    return true;
  }
}

または、FlareContrlsを継承したクラスを別途用意し、
FlareActorのcontrollerに設定する方法もあります。

import 'package:flare_flutter/flare.dart';
import 'package:flare_dart/math/mat2d.dart';
import 'package:flare_dart/math/vec2d.dart';
import 'package:flare_flutter/flare_controls.dart';

class SampleController extends FlareControls {
  @override
  void initialize(FlutterActorArtboard artboard) {
    super.initialize(artboard);
  }

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    super.advance(artboard, elapsed);
    return true;
  }

  @override
  void setViewTransform(Mat2D viewTransform) {}
}

1. アニメーションを制御する

// initialize
ActorAnimation _anim = artboard.getAnimation('Untitled'); // 任意のアニメーション名を指定

// advence
_anim.apply(elapsed, artboard, 1);// elapsedに経過時間を入れれば、アニメーションを制御できます。

参考