Flutter - 文字渐变动画过渡

Question

我想在两个文本之间制作淡入淡出的过渡效果，也就是说，通过动画将值从一个文本变成另一个文本...例如，第一个...第二个...并且不断重复这个值。

这就是我尝试制作的效果。

Container(
        alignment: Alignment.center,
        width: 150,
        height: 50,
        child: FadeTransition(
          opacity: controller2,
          child: Text('Breathe in ',textDirection: TextDirection.ltr,style: TextStyle(color: Colors.white,fontSize: 30,),),
        ),
        color: Colors.red,


 ),

我该怎么做才能达成这个目标？

- Mohamed M. Abo Elmagd

Answer 1

我认为您可以使用AnimatedOpacity来解决这个问题，它会自动淡入淡出进行动画效果。

以下是一段示例代码，叠放了两个小部件，一个是红色的，一个是黑色的，交替显示完全不透明的小部件。

double opacity = 1.0;

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

changeOpacity() {
  Future.delayed(Duration(seconds: 1), () {
    setState(() {
      opacity = opacity == 0.0 ? 1.0 : 0.0;
      changeOpacity();
    });
  });
}

Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      AnimatedOpacity(
        opacity: opacity,
        duration: Duration(seconds: 1),
        child: Container(
          color: Colors.black,
        ),
      ),
      AnimatedOpacity(
        opacity: opacity == 1 ? 0 : 1,
        duration: Duration(seconds: 1),
        child: Container(
          color: Colors.red,
        ),
      ),
    ]
  );
}

- Evaldo Bratti

---

我尝试了这个，但它不起作用...我的意思是将文本从值“one”更改为另一个值“two”，但通过动画自动应用于文本而不是数字，例如gif计数器。 - Mohamed M. Abo Elmagd

将Container替换为您的文本还不够满意吗？尝试将Container( color: Colors.black, )替换为Text("One")，将Container( color: Colors.red, ),替换为Text("Two")。 - Evaldo Bratti

非常感谢，这就是我想要的结果，它运行得很好 :) - Mohamed M. Abo Elmagd

哦，很抱歉，但我有一个小问题。我在同一个类中有另一个动画，因此这个函数不能正常工作。 - Mohamed M. Abo Elmagd

@EvaldoBratti，你知道怎么解决这个问题吗？它是在同一个列表中进行文本转换，而不是在列表之间进行文本转换。https://stackoverflow.com/questions/68314514/animation-text-transition-upon-button-press - VegetaSaiyan