欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  网络运营

Flutter 淡入淡出效果

程序员文章站 2022-03-06 18:43:52
动漫教给我们的道理,哪一句让你眼眶湿润了Animation teaches us the truth, which one let your eyes wetWidget 的淡入淡出效果class AnimatedContainerApp extends StatefulWidget { @override _AnimatedContainerAppState createState() => _AnimatedContainerAppState();}class ....

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

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

Widget 的淡入淡出效果

Flutter 淡入淡出效果

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

Flutter 淡入淡出效果

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;
            });
          },
        ),
      ),
    );
  }
}
AnimatedContainer+AnimatedOpacity组合使用

Flutter 淡入淡出效果

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

本文地址:https://blog.csdn.net/u013491829/article/details/109646683

相关标签: Flutter