Flare Flutter 动画

Posted

技术标签:

【中文标题】Flare Flutter 动画【英文标题】:Flare Flutter Animation 【发布时间】:2020-01-03 16:23:09 【问题描述】:

我正在尝试调用一个动画(我得到了),但我希望在完成后将它转发到另一个页面。我如何做路由系统或如何让动画完成并调用另一个屏幕?

    return Scaffold(

      body: Stack(

        children: <Widget>[

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 400,
                    height: 400,
                    alignment: Alignment.center,
                    child: FlareActor(
                      "assets/animations/LoadingM.flr",
                      alignment: Alignment.center,
                      fit: BoxFit.contain,
                      color: Colors.blue,
                      animation: _animationL,
                    ),
                  ),
                ],
              )
            ],
          )
        ],
      ),
    );
  

【问题讨论】:

不确定,但您可以使用计时器触发路线 【参考方案1】:

这很简单,只需将回调属性添加到 FlareActor 即可。

return Scaffold(

      body: Stack(

        children: <Widget>[

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 400,
                    height: 400,
                    alignment: Alignment.center,
                    child: FlareActor(
                      "assets/animations/LoadingM.flr",
                      alignment: Alignment.center,
                      fit: BoxFit.contain,
                      color: Colors.blue,
                      animation: _animationL,
                      callback: (String animationName) 
                        //Navigate to new page here
                        //hint: the animationName parameter tells you the name
                        //      of the animation that finished playing
                      ,
                    ),
                  ),
                ],
              )
            ],
          )
        ],
      ),
    );

【讨论】:

以上是关于Flare Flutter 动画的主要内容,如果未能解决你的问题,请参考以下文章

在 Flutter 中重放相同的 Flare 动画

Flare Flutter 动画问题

Flutter Flare 动画无法正常工作

Flutter 专题51 图解动画小插曲之 Flare 动画 #yyds干货盘点#

Flare Flutter 动画

使用控制器参数flutter时Flare Actor突然消失