颤振 - 动画文本淡入淡出过渡

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