如何从外部控制 Flutter 中的动画？答案

【问题标题】：How can I control animations in Flutter from outside?如何从外部控制 Flutter 中的动画？
【发布时间】：2018-10-21 23:13:39
【问题描述】：

将状态传递给小部件很容易。我有一个StatefulWidget，其中包含一个带有控制器的动画。我需要能够从我的小部件树中更高的另一个小部件触发动画。

我的MainApp 应该使用按钮触发动画。

据我了解，AnimationController 只有一个命令式 API。我可以打电话给controller.forward() 或controller.reverse()。但要做到这一点，我需要将控制器暴露给我的 MainApp。

我目前所做的是保留我的状态的全局变量。

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      ...
      body: new LogoWidget(),
    );
  }

  _startAnimation() {
    _state.restartAnimation();
  }
}

_LogoWidgetState _state; // yuk!

class LogoWidget extends StatefulWidget {
  _LogoWidgetState createState() {
    _state = _LogoWidgetState();
    return _state;
  }
}

class _LogoWidgetState extends State<LogoWidget>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  restartAnimation() {
    controller.value == 1.0 ? controller.reverse() : controller.forward();
  }
  ...
}

（完整源代码here）

有什么更好的方法来处理这个问题？

【问题讨论】：

如果LogoWidget 应该在其他地方进行控制，为什么还要保存动画内容？
好吧...动画小部件本身应该对应用程序状态做出反应...否则我必须拔出AnimationController，但MainApp不应该关心那个全部。

标签： animation dart flutter

【解决方案1】：

你不需要_LogoWidgetState _state; // yuk!在不知名的地方，但你可以试试：

创建LogoWidget _myBody = LogoWidget()，并将其用于您的body:
同样，申请final _LogoWidgetState _state = _LogoWidgetState()
然后将其称为_myBody._state.restartAnimation()

您的示例，已修改：

class MainApp extends StatelessWidget {

  LogoWidget _myBody = LogoWidget();  //<---

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      ...
      body: _myBody,  //<---
    );
  }

  _startAnimation() {
    _myBody._state.restartAnimation();  //<---
  }
}

class LogoWidget extends StatefulWidget {

  final _LogoWidgetState _state = _LogoWidgetState();  //<---

  _LogoWidgetState createState() {
    return _state;
  }
}

但如果你觉得_myBody._state.restartAnimation() 太长，你可以缩短它：

class LogoWidget extends StatefulWidget {

  final _LogoWidgetState _state = _LogoWidgetState();  //<---

  void restartAnimation() {  //<---
    _state.restartAnimation();
  }

  _LogoWidgetState createState() {
    return _state;
  }
}

那就用_myBody.restartAnimation()

这里有一些相关的帖子：

【讨论】：