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

Answer 2

您可以将容器保留为空，并使用CSS content属性更改文本，并将动画放入keyFrames

尝试类似的方法

Container(
    alignment: Alignment.center,
    width: 150,
    height: 50,
    animation-name: fade ;
    animation-duration: 2s;
    }
    Container::before {
        content: 'your text';
    }
    @keyframes fade {
    30% {
        content: 'your text 2';
    /*  Play with the fade properties here  */
    60% {
        content: 'your Text 3;
        }
    90% {
        content: 'your Text 4';
        }
}

Flutter-动画文字淡入淡出过渡

2 个答案: