动漫教给我们的道理,哪一句让你眼眶湿润了
Animation teaches us the truth, which one let your eyes wet
Widget 的淡入淡出效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | class AnimatedContainerApp extends StatefulWidget { @override _AnimatedContainerAppState createState() => _AnimatedContainerAppState(); } class _AnimatedContainerAppState extends State<AnimatedContainerApp> { bool _visible = true; @override Widget 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; }); }, ), ), ); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | lass AnimatedContainerApp extends StatefulWidget { @override _AnimatedContainerAppState createState() => _AnimatedContainerAppState(); } class _AnimatedContainerAppState extends State<AnimatedContainerApp> { bool _visible = true; @override Widget 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; }); }, ), ), ); } } |
1 | AnimatedContainer+AnimatedOpacity组合使用 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | class _AnimatedContainerAppState extends State<AnimatedContainerApp> { bool _visible = true; @override Widget 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