点击按钮时如何根据当前状态播放不同的动画？

Question

我有一个小部件，它使用 GestureDetector 和 AnimatedBuilder 在点击按钮时播放动画。我可以毫无问题地播放单个动画。我想要做的是能够根据状态在按钮上播放三种不同的动画（不同的颜色，不同的持续时间）。例如;

• 如果State = A，播放动画A

• 如果State = B，播放动画B

• 如果State = C，播放动画C

我尝试过使用三个 AnimationControllers，但似乎无法正常工作。我怎样才能做到这一点？解决方案是三个 AnimationControllers 吗？它是一个带有多个 TweenSequence 的 AnimationController 吗？我添加和删除 Tweens 的是一个 TweenSequence 吗？

谢谢你的时间。

Answer 1

因为我有一个实现，所以我把它附在这里

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  TweenSequence<Color> _tweenSeqA;
  TweenSequence<Color> _tweenSeqB;
  TweenSequence<Color> _tweenSeqC;
  TweenSequence<Color> _currentTweenSeq;

  String _currentState = 'A';

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );

    _tweenSeqA = TweenSequence<Color>(
      [
        TweenSequenceItem(
          tween: ColorTween(begin: Colors.red, end: Colors.yellow),
          weight: 1,
        ),
      ],
    );

    _tweenSeqB = TweenSequence<Color>(
      [
        TweenSequenceItem(
          tween: ColorTween(begin: Colors.green, end: Colors.blue),
          weight: 1,
        ),
      ],
    );

    _tweenSeqC = TweenSequence<Color>(
      [
        TweenSequenceItem(
          tween: ColorTween(begin: Colors.yellow, end: Colors.pink),
          weight: 1,
        ),
      ],
    );

    _currentTweenSeq = _tweenSeqA;
  }

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

  void _playAnimation() {
    _currentTweenSeq = _getTweenSequenceForCurrentState();

    _controller
      ..reset()
      ..animateTo(
        1,
        curve: Curves.linear,
      );
  }

  TweenSequence<Color> _getTweenSequenceForCurrentState() {
    switch (_currentState) {
      case 'A':
        return _tweenSeqA;
      case 'B':
        return _tweenSeqB;
      case 'C':
        return _tweenSeqC;
      default:
        return _tweenSeqA;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          if (_currentState == 'A') {
            _currentState = 'B';
          } else if (_currentState == 'B') {
            _currentState = 'C';
          } else {
            _currentState = 'A';
          }
        });

        _playAnimation();
      },
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          final color = _currentTweenSeq.evaluate(_controller);

          return Container(
            width: 100,
            height: 100,
            color: color,
          );
        },
      ),
    );
  }
}

在此图中，定义了三个 TweenSequenceColor> 对象——每个状态一个。为了跟踪用于动画的 TweenSequence，我们另外定义了一个名为 _currentTweenSeq 的变量。

如果您仍然有一些困惑，请添加您的宝贵意见。