Flutter - 我的动画只播放一次

Posted

技术标签:

【中文标题】Flutter - 我的动画只播放一次【英文标题】:Flutter - My animation is only playing once 【发布时间】:2020-08-17 20:56:35 【问题描述】:

我想为文本设置动画,并制作了一个不错的动画。因此,我制作了一个名为 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 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 回调调用将刷新文本的 Game 类。

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

【问题讨论】:

【参考方案1】:

我找到了基于@HBS想法的解决方案!

我取了他的功能,稍微改了一下:

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

【讨论】:

我发誓我是先写的,然后出于某种原因将其更改为 repeat() 哈哈!很高兴你解决了! 编辑了我的答案【参考方案2】:

您可以在 AnimatedText 类中覆盖 didUpdateWidget

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

【讨论】:

嗨,谢谢,但它不起作用。即使文本已经加载,动画也会无休止地重复......这可能是因为每个 setState() 的同一页面上同时有两个 AnimatedText ?

以上是关于Flutter - 我的动画只播放一次的主要内容,如果未能解决你的问题,请参考以下文章

Flutter,2个动画控制器导致错误

Flutter:如何用 Provider 播放动画?

unity 我的动画总是只播放第一帧无限卡

Flutter 如何平滑地为标记设置动画?

如何在颤动中播放 Rive 动画

是啥导致我的动画在第一次播放后失败?