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

8zzbczxx  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(128)

我有一个小工具,它使用GestureDetector和AnimatedBuilder在按钮被点击时播放动画。我可以播放一个动画,没有问题。我想做的是能够根据状态在按钮上播放三个不同的动画(不同的颜色,不同的持续时间)。例如;

  • 如果状态= A,则播放动画A
  • 如果状态= B,则播放动画B
  • 如果状态= C,则播放动画C

我试过使用三个AnimationController,但似乎无法正常工作。我该如何实现这一点?解决方案是三个AnimationController吗?是一个具有多个补间序列的AnimationController吗?是一个需要添加和删除补间的补间序列吗?
谢谢你抽出时间。

wrrgggsh

wrrgggsh1#

由于我只有一个实现,因此将其附加到此处

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的变量。
如果您仍然有一些困惑,然后添加您的宝贵意见。

相关问题