使用时间减慢 Flutter 中的 Flare 动画并在特定时间重置

Question

我使用flare制作了以下动画。

Animation

我只想在特定时间段内逐帧移动，并在特定时间后将其反转。

例如：
动画必须从早上 6 点开始，必须在晚上 6 点结束。框架必须每 30 分钟更换一次。

Answer 1

您可以创建一个自定义耀斑控制器并在 FlareActor 小部件中提供该控制器。

Controller _controller = Controller();
@override
  Widget build(BuildContext context) {
    EdgeInsets devicePadding = MediaQuery.of(context).padding;
    return Scaffold(
      backgroundColor: Color.fromRGBO(93, 142, 155, 1.0),
      body: Container(
        child: Stack(
          children: <Widget>[
            Positioned.fill(
              child: SingleChildScrollView(
                padding: EdgeInsets.only(
                  left: 20.0,
                  right: 20.0,
                  top: devicePadding.top + 50.0,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 200,
                      padding: const EdgeInsets.only(left: 30.0, right: 30.0),
                      child: FlareActor(
                        "assets/Teddy.flr",
                        shouldClip: false,
                        alignment: Alignment.bottomCenter,
                        fit: BoxFit.contain,
                        controller: _controller,
                      ),
                    ),

现在是时候创建控制器了

// you have to override three methods of Flare Controller

 @override
  void initialize(FlutterActorArtboard artboard) {
    _artboard = artboard;
    _demoAnimation = FlareAnimationLayer()
      ..animation = _artboard.getAnimation("Demo Mode");
    _skyAnimation = FlareAnimationLayer()
      ..animation = _artboard.getAnimation("Sun Rotate")
      ..mix = 1.0;
  }

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
here you can change time for your animation
    _skyAnimation.time =
        (_skyAnimation.time + elapsed) % _skyAnimation.duration;


    _skyAnimation.apply(artboard);

    /// Iterate from the top b/c elements might be removed.
    int len = _roomAnimations.length - 1;
    for (int i = len; i >= 0; i--) {
      FlareAnimationLayer layer = _roomAnimations[i];
      layer.time += elapsed;
      /// The mix quickly ramps up to 1, but interpolates for the first few frames.
      layer.mix = min(1.0, layer.time / 0.07);
      layer.apply(artboard);
      /// When done, remove it.
      if (layer.isDone) {
        // print("layer is done");
        _roomAnimations.removeAt(i);
      }
    }   
    return true;
  }

  @override
  void setViewTransform(Mat2D viewTransform) {}
}