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,


 ),

我怎样才能做到这一点？

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