Flutter的AnimatedContainer实现容器样式的动画切换

267 阅读1分钟

题记 —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

重要消息


AnimatedContainer可以理解为Container Animat,也就是说带动画的容器,使用AnimatedContainer可以很方便的实现Widget的动画效果。

如下图所示的效果,默认情况下图片是一个正方形展示效果,当点击图片后,图片的宽度与高度由原来的100在1秒时间内过渡到200像素,并且变为圆形。

在这里插入图片描述
上图所示的效果过程就可以通过AnimatedContainer来轻松的实现,代码如下:

///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ClipRectPageState();
  }
}

class ClipRectPageState extends State {
  ///点击标识
  bool click = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("AnimatedContainer基本使用"),
      ),
      body: Center(
        ///手势识别
        child: GestureDetector(
          onTap: () {
            setState(() {
              click = !click;
            });
          },
          ///动画容器
          child: AnimatedContainer(
            ///动画插值器
            curve: Curves.bounceInOut,
            ///容器的高度
            height: click ? 200 : 100,
            ///容器的宽度
            width: click ? 200 : 100,
            ///容器的装饰
            decoration: BoxDecoration(
              ///背景图片
                image: DecorationImage(
                  ///加载资源目录下的图片
                  image: AssetImage('assets/images/2.0x/banner4.webp'),
                  fit: BoxFit.cover,
                ),
                ///圆角
                borderRadius: BorderRadius.all(Radius.circular(
                  click ? 200 : 0,
                ))),
            ///过渡时间
            duration: Duration(milliseconds: 15000),
          ),
        ),
      ),
    );
  }
}


公众号 我的大前端生涯