我有一个具有正常/动画状态的自定义小部件。有时我想让它变得生动，有时想要静态。

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

这是我的代码:

测试页:

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;
              });
            },
          ),
        ],
      ),
    );
  }
}

记分板小部件:

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),
          );
  }
}

你愿意帮助我吗？提前致谢!

最佳答案

回答

如果您初始化一个 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, @required TickerProvider vsync }) Creates an animation controller. [...]

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

如果您初始化小部件 ScoreBoard 的状态，则方法 forward 在您应用的整个生命周期内只会被调用一次。 forward 方法使您的动画在 1 秒内从 lowerBound (0.0) 增加到 upperBound (1.0)。

Starts running this animation forwards (towards the end).

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();
    // ...

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

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

关于flutter - 从外部小部件触发小部件动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55344549/