旋转动画在开始时旋转两次答案

【问题标题】：Rotation animation rotates twice at the beginning旋转动画在开始时旋转两次
【发布时间】：2020-10-18 22:32:28
【问题描述】：

我刚刚注意到，旋转动画在热重启后会旋转两倍。之后它运行良好，但只是因为第一个故障按钮是朝下的。我有这个按钮，每次按下它都会旋转 180 度。

  AnimationController _animationController;
  bool pressed = false;
  Animation<double> _animation;

 @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this);

    super.initState();
  }


_animation =
    Tween<double>(begin: !pressed ? 0 : 0.5, end: !pressed ? 0.5 : 1)
        .animate(_animationController);

  SizedBox.fromSize(
        size: Size(50, 50),
        child: ClipOval(
          child: Material(
            color: Colors.blue,
            child: InkWell(
              onTap: () {
                _animationController.forward(from: 0);
                setState(() {
                  pressed = !pressed;
                });
              },
              splashColor: Colors.black12,
              child: RotationTransition(
                turns: _animation,
                child: Icon(
                  Icons.filter_list,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      )

【问题讨论】：

你试过用AnimationBuilder做吗？
其实我做到了，但结果完全相同......
您是否需要始终在 isPressed 切换时顺时针旋转？我可以在回答中显示这种方法的主要错误在哪里，但最后我认为您需要一些解决方案，所以请描述您希望看到的行为 - 这样我就可以提供帮助
不...我并不关心旋转方向而是图标的位置
@SergeySalnikov 行为我猜从问题中很明显。当pressed 变量为假时，图标应处于正常位置，当pressed 为真时，图标应位于180度。正如您从视频中看到的那样，第一次按下会将图标旋转 360 度。如果你放慢动画，它基本上会旋转 180 度，但从错误的位置开始

标签： flutter dart

【解决方案1】：

请参考choosing an approach in Animation introduction

在你的情况下，我更喜欢TweenAnimationBuilder

  /// content of State of statefull widget
  bool pressed = false;
  Tween<double> _tween = Tween<double>(begin: null, end: 0.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          duration: Duration(seconds: 1),
          tween: _tween,
          builder: (context, turns, child) {
            return GestureDetector(
              onTap: () {
                _tween = Tween<double>(end: pressed ? 0 : 0.5);
                pressed = !pressed;
                setState(() {});
              },
              child: Transform.rotate(
                angle: turns * pi * 2, /// need to import 'dart:math';
                child: Text('$pressed'),
              ),
            );
          },
        ),
      ),
    );
  }

附：关于你方法中的问题的一点点。

您同时依赖于重新构建和动画控制器，但它们彼此独立

inits with press= false 和 tween 0 -> 0.5
当点击动画从 0 -> 0.5 开始动画时
setState Pressed=true 并使用新的补间 0.5 -> 1 重建小部件，animationController 仍未完成，这次将动画设置为新值 0.5 -> 1 - 你可以看到这一步

【讨论】：

你在哪里初始化turns变量？
它没有被初始化为 builder: (_, turns, child) 的一部分 - 最后它是一个 AnimationController 值，由你传递给 TweenAnimationBuilder 的 Tweens 修改
啊...对不起..明白了..等等