从外部窗口小部件触发窗口小部件动画

Question

我有一个具有正常/动画状态的自定义小部件。有时我想成为动画，有时候是静态的。

我做了一个简单的测试项目来演示我的问题：测试页面包含我的自定义小部件（ScoreBoard）和2个按钮来启动/停止动画记分板。我的问题是，即使我开始动画，ScoreBoard也没有动画。

这是我的代码：

TestPage：

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  bool _animate;

  @override
  void initState() {
    _animate = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ScoreBoard(
            text: "Hello, world!",
            animate: _animate,
          ),
          FlatButton(
            child: Text("START animation"),
            onPressed: () {
              setState(() {
                _animate = true;
              });
            },
          ),
          FlatButton(
            child: Text("STOP animation"),
            onPressed: () {
              setState(() {
                _animate = false;
              });
            },
          ),
        ],
      ),
    );
  }
}

ScoreBoard小部件：

class ScoreBoard extends StatefulWidget {
  final String text;
  final bool animate;

  const ScoreBoard({Key key, this.text, this.animate}) : super(key: key);

  @override
  _ScoreBoardState createState() => _ScoreBoardState();
}

class _ScoreBoardState extends State<ScoreBoard>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.animate
        ? ScaleTransition(
            child:
                Text(widget.text, style: Theme.of(context).textTheme.display1),
            scale: new CurvedAnimation(
              parent: _controller,
              curve: Curves.easeIn,
            ),
          )
        : Container(
            child:
                Text(widget.text, style: Theme.of(context).textTheme.display1),
          );
  }
}

你能帮我这么好吗？提前致谢！

Answer 1

回答

如果你初始化一个AnimationController小部件并且没有为lowerBound和upperBound指定参数（这里就是这种情况），那么默认情况下你的动画将以lowerBound 0.0开始。

AnimationController（{double value，Duration duration，String debugLabel，double lowerBound：0.0，double upperBound：1.0，AnimationBehavior animationBehavior：AnimationBehavior.normal，@ requiredTickerProvider vsync}）创建一个动画控制器。 [...]

https://docs.flutter.io/flutter/animation/AnimationController-class.html

如果您初始化窗口小部件ScoreBoard的状态，则forward方法在应用程序的整个生命周期内仅被调用一次。方法forward使你的动画在1秒内从lowerBound（0.0）增加到upperBound（1.0）。

开始向前运行此动画（到最后）。

https://docs.flutter.io/flutter/animation/AnimationController/forward.html

在我们的例子中，一旦forward方法被调用，就没有办法回来。我们只能停止动画。

按Ctrl + F5完全重启应用程序以查看动画。为了使其更清晰，请将动画的持续时间更改为10秒。

顺便说一句。从Dart 2开始，您不需要使用new关键字。

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..forward();
  }

例

要查看会发生什么，您可以将其添加到您的build方法：

  @override
  Widget build(BuildContext context) {
    // Execute 'reverse' if the animation is completed
    if (_controller.isCompleted)
      _controller.reverse();
    else if (_controller.isDismissed)
      _controller.forward();
    // ...

...并且不要在forward方法中调用方法initState：

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    );
  }