• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter组件之 AnimatedContainer

Flutter cps12345 2个月前 (01-14) 49次浏览 0个评论

AnimatedContainer

Flutter中有很多用于动画的控件,这篇文章介绍动画控件AnimatedContainer,我们可以通俗的理解AnimatedContainer是带动画功能的Container

AnimatedContainer只需要提供动画开始值和结束值,它就会动起来并不需要我们主动调用setState方法。 变化AnimatedContainer的宽高实现变大的效果,代码如下:​

bool click = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            click = !click;
          });
        },
        child: AnimatedContainer(
          height: click ? 200 : 100,
          width: click ? 200 : 100,
          color: Colors.blue,
          duration: Duration(seconds: 3),

        ),
      ),
    );
  }

效果如下: Flutter组件之 AnimatedContainer

动画不仅可以作用在宽高上,还可以作用在颜色、边界、边界圆角半径、背景图片、形状等。

AnimatedContainer有2个必须的参数,一个时长duration,即动画执行的时长,另一个是动画曲线curve,默认是线性,系统为我们提供了很多动画曲线(加速、减速等)。 设置动画曲线代码如下:

AnimatedContainer(
	curve: Curves.bounceIn,
	...
)

如果想在动画执行结束时做一些事情,需要设置onEnd,代码如下:

AnimatedContainer(
	onEnd: (){
		...
	}
}

实战

将图片放大并过度到圆形,动画执行结束后在反向执行动画,如此反复,代码如下:

AnimatedContainer(
      height: click ? 200 : 100,
      width: click ? 200 : 100,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
            fit: BoxFit.cover,
          ),
          borderRadius: BorderRadius.all(Radius.circular(
            click ? 200 : 0,
          ))),
      duration: Duration(seconds: 3),
      curve: Curves.linear,
      onEnd: (){
        setState(() {
          click = !click;
        });
      },
    )

动画效果: Flutter组件之 AnimatedContainer

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址