Flutter - 动画文本淡入淡出过渡答案

【问题标题】：Flutter - Animation Text Fade transitionFlutter - 动画文本淡入淡出过渡
【发布时间】：2020-01-06 15:54:48
【问题描述】：

我想对两个文本进行淡入淡出转换，我的意思是通过动画将值从文本更改为另一个...例如一个..两个..并一次又一次地重复这个值

这就是我试图做的

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,


 ),

我怎样才能做到这一点？

【问题讨论】：

标签： animation flutter

【解决方案1】：

我认为您可以使用 AnimatedOpacity 解决此问题，它会自动设置动画，淡入淡出不透明度。

此示例代码堆叠了 2 个小部件，一个红色和一个黑色，交替使用其中一个完全不透明。

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,
        ),
      ),
    ]
  );
}

【讨论】：

我试过了，但它不起作用......我的意思是将文本从值“一”更改为另一个值“二”，但通过动画（如 gif 计数器）自动更改但应用于文本不是数字
用您的文字替换Container 不是您想要的吗？尝试将Container( color: Colors.black, ) 替换为Text("One")，将Container( color: Colors.red, ), 替换为Text("Two")
哦，非常感谢这是我试图实现的目标，效果很好:)
哦，对不起，我有一个小问题，我在同一个班级有另一个动画，通过这个函数它不能正常工作
在同一个小部件中拥有多个动画没有问题，这可能是您自己的代码中的一些冲突。让一个动画开始工作，然后让第二个动画保持第一个工作。