Flutter 淡入淡出效果

动漫教给我们的道理，哪一句让你眼眶湿润了

Animation teaches us the truth, which one let your eyes wet

Widget 的淡入淡出效果

class AnimatedContainerApp extends StatefulWidget {@override_AnimatedContainerAppState createState() => _AnimatedContainerAppState();}class _AnimatedContainerAppState extends State<AnimatedContainerApp> {bool _visible = true;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: AnimatedOpacity(//opacity=0.0透明//opacity=1.0完全显示opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 200.0,height: 200.0,color: Colors.blue,),),),floatingActionButton: FloatingActionButton(child: Icon(Icons.play_arrow),onPressed: () {setState(() {_visible = !_visible;});},),),);}}

lass AnimatedContainerApp extends StatefulWidget {@override_AnimatedContainerAppState createState() => _AnimatedContainerAppState();}class _AnimatedContainerAppState extends State<AnimatedContainerApp> {bool _visible = true;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: Stack(children: <Widget>[AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 3000),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 350.0,height: 350.0,color: Colors.blue.withOpacity(0.2),child: Text('1'),alignment: Alignment.bottomRight,),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 2500),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 300.0,height: 300.0,color: Colors.blue.withOpacity(0.3),child: Text('2'),alignment: Alignment.bottomRight,),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 2500),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 250.0,height: 250.0,color: Colors.blue.withOpacity(0.4),child: Text('3'),alignment: Alignment.bottomRight,),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 2000),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 200.0,height: 200.0,color: Colors.blue.withOpacity(0.5),child: Text('4'),alignment: Alignment.bottomRight,),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 1500),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 150.0,height: 150.0,color: Colors.blue.withOpacity(0.6),alignment: Alignment.bottomRight,child: Text('5'),),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 1000),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 100.0,height: 100.0,color: Colors.blue.withOpacity(0.64),alignment: Alignment.bottomRight,child: Text('6'),),curve: Curves.linear,),AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box must be a child of the AnimatedOpacity widget.child: Container(width: 50.0,height: 50.0,alignment: Alignment.bottomRight,color: Colors.blue.withOpacity(0.98),child: Text('7'),),curve: Curves.linear,),],),),floatingActionButton: FloatingActionButton(child: Icon(Icons.play_arrow),onPressed: () {setState(() {_visible = !_visible;});},),),);}}

AnimatedContainer+AnimatedOpacity组合使用

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {bool _visible = true;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: AnimatedOpacity(//opacity=0.0透明//opacity=1.0完全显示opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box must be a child of the AnimatedOpacity widget.child: AnimatedContainer(width: _visible ? 200.0 : 100.0,height: _visible ? 100.0 : 200.0,color: _visible ? Colors.red : Colors.blue,duration: Duration(seconds: 2),curve: Curves.ease,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(Icons.ac_unit),Icon(Icons.ac_unit),Icon(Icons.ac_unit),],),),),),floatingActionButton: FloatingActionButton(child: Icon(Icons.play_arrow),onPressed: () {setState(() {_visible = !_visible;});},),),);}}

参考

浅尝flutter中的动画（淡入淡出）

Flutter Widgets 之 Opacity 和AnimatedOpacity