提问人:Simon B 提问时间:8/18/2020 最后编辑:Junsu ChoSimon B 更新时间:8/18/2020 访问量:238
Flutter - 我的动画只播放一次
Flutter - My animation is only playing once
问:
我想给文本制作动画,我放了一个漂亮的动画。因此,我制作了一个名为 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))),
),
),
],
);
}
}
回调调用将刷新文本的 Game 类。onPressed
有人知道如何解决这个问题吗?
答:
1赞
HBS
8/18/2020
#1
您可以在类中覆盖:didUpdateWidget
AnimatedText
@override
void didUpdateWidget(AnimatedText oldWidget) {
if(oldWidget.text != widget.text) {
_controller.reset();
_controller.forward();
}
super.didUpdateWidget(oldWidget);
}
评论
0赞
Simon B
8/18/2020
嗨,谢谢,但它不起作用。即使文本已经加载,动画也会无休止地重复......这可能是因为每个 setState() 的同一页面上同时有两个 AnimatedText?
1赞
Simon B
8/18/2020
#2
我找到了基于@HBS想法的解决方案!
我接受了他的功能并稍微改变了一下:
@override
void didUpdateWidget(AnimatedText oldWidget) {
if(oldWidget.text != widget.text) {
_controller.reset();
_controller.forward();
}
super.didUpdateWidget(oldWidget);
}
评论
0赞
HBS
8/18/2020
我发誓我先写了它,然后出于某种原因将其更改为 repeat() 哈哈!很高兴你解决了它!
0赞
HBS
8/18/2020
编辑了我的答案
评论