Question

最小可复制代码：

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  bool _foo = true;
  static const _curve = Curves.linear;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    )..addListener(() => setState(() {}));
  }

  void _animate() async {
    if (_foo) await _controller.forward();
     else await _controller.reverse();
    _foo = !_foo;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _controller.value,
              duration: Duration(milliseconds: 500),
              curve: _curve,
              child: box,
            ),
            SizedBox(height: 12),
            AnimatedBuilder(
              animation: CurvedAnimation(parent: _controller, curve: _curve),
              builder: (context, child) {
                return Opacity(
                  opacity: _controller.value,
                  child: box,
                );
              },
            ),
            RaisedButton(
              onPressed: _animate,
              child: Text('Animate'),
            ),
          ],
        ),
      ),
    );
  }

  Widget get box => Container(width: 100, height: 100, color: Colors.blue);
}

输出：

从屏幕截图中，您可以看到Curve和AnimatedOpacity都使用相同的AnimatedBuilder，但是输出仍然不相同，有人可以告诉我为什么吗？

我是Flutter的新手，所以不知道我是否犯了一些愚蠢的错误。非常感谢您的参与。

Answer 1

AnimatedOpacity是ImplicitAnimationWidget，表示它根据您提供的Tween值（以及曲线和持续时间）构造一个opacity。隐式动画会根据当前值和新值进行更改，但是由于您赋予了_controller.value，因此它会根据控制器的速度更改来更改其速度（速率的变化，声音的变化就像开始）。像数学一样思考，AnimationBuilder为您提供基于曲线的速度（如一阶微分），而AnimatedOpacity则具有相同的速度，因此您无需构建控制器，而是因为您赋予了{ {1}}（以给定的速度变化），它可以为您提供该速度的变化率（类似二阶微分的声音）

在此示例中，我给了_controller.value一个简单的AnimatedOpacity（1或0，取决于我同时启动double的情况）。它们具有相同的曲线和持续时间，因此动画看起来基本相同

AnimationController

具有不透明度的AnimatedOpacity和AnimatedBuilder无法执行相同的动画

1 个答案: