Flutter

Question

我想为文字添加动画效果，我放了一个漂亮的动画。所以我制作了一个名为 AnimatedText() 的有状态小部件，并在另一个使用此 AnimatedText 的有状态小部件中使用它，并在每次点击屏幕时刷新文本。但是，当我使用 setState() 更改此文本时，如果动画已经播放过，则不会再次播放...

这是我的代码，AnimatedText() :

class AnimatedText extends StatefulWidget {
  double textSize;
  String text;

  AnimatedText(this.text, {this.textSize = 20});

  @override
  _AnimatedTextState createState() => _AnimatedTextState();
}

class _AnimatedTextState extends State<AnimatedText> with SingleTickerProviderStateMixin {
  Animation _fontSizeAnimation;
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(duration: Duration(milliseconds: 250), vsync: this);
    _fontSizeAnimation = CurvedAnimation(parent: _controller, curve: Curves.bounceOut);
    _fontSizeAnimation.addListener(() => setState(() {}));
    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Text(widget.text, textAlign: TextAlign.center, style: GoogleFonts.rubik(color: Colors.white, fontSize: _fontSizeAnimation.value*ResponsiveSize().responsiveSizeSmall(widget.textSize)));
  }
}

这里是使用 AnimatedText() 的 class：

class BasicDisplay extends StatefulWidget {
  Question question;
  VoidCallback onTap;
  VoidCallback onPressed;
  BasicDisplay(this.question, this.onTap, this.onPressed);

  @override
  _BasicDisplayState createState() => _BasicDisplayState();
}

class _BasicDisplayState extends State<BasicDisplay> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return GamePageBackground(
      onTap: widget.onTap,
      question: widget.question,
      children: <Widget>[
        Expanded(
          child: Container(
            alignment: Alignment.topRight,
            child: IconButton(
              onPressed: widget.onPressed,
              icon: Icon(Icons.clear, color: Color(0xaaffffff), size: ResponsiveSize().responsiveSize(quitIconButtonSize),),
            ),
          ),
        ),
        AnimatedText(widget.question.category, textSize: questionCategoryTextSize,),
        AnimatedText(widget.question.question, textSize: questionTextSize,),
        Expanded(
          child: Container(
            padding: EdgeInsets.only(bottom: ResponsiveSize().responsiveSize(10)),
            alignment: Alignment.bottomCenter,
            child: Text(widget.question.explanation, textAlign: TextAlign.center ,style: GoogleFonts.rubik(color: Colors.white, fontSize: ResponsiveSize().responsiveSize(bottomExplanationTextSize))),
          ),
        ),
      ],
    );
  }
}

onPressed回调调用将刷新文本的游戏class。

有人知道如何解决这个问题吗？

Answer 1

您可以覆盖 AnimatedText class 中的 didUpdateWidget:

@override
void didUpdateWidget(AnimatedText oldWidget) {
  if(oldWidget.text != widget.text) {
    _controller.reset();
    _controller.forward();
  }
  super.didUpdateWidget(oldWidget); 
}

Answer 2

我根据@HBS 的想法找到了解决方案！

我借鉴了他的功能，稍微改了一下:

@override
  void didUpdateWidget(AnimatedText oldWidget) {
    if(oldWidget.text != widget.text) {
      _controller.reset();
      _controller.forward();
    }
    super.didUpdateWidget(oldWidget);
  }

Flutter - 我的动画只播放一次

Flutter - My animation is only playing once

animation

callback

ios

dart