Flutter AnimatedContainer 动画使用解析

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

重要消息

网易云【玩转大前端】配套课程
EDU配套教程
Flutter开发的点滴积累系列文章

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

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

上图所示的效果过程就可以通过AnimatedContainer来轻松的实现，代码如下：

///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return ClipRectPageState();}
}class ClipRectPageState extends State {///点击标识bool click = false;@overrideWidget 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),),),),);}
}

详细使用

 AnimatedContainer(//动画速率curve: Curves.easeInBack,//动画执行结束的回调onEnd: () {},//子Widget 对齐方式alignment: Alignment.center,width: 300,//高度height: 200,//背景颜色// color: Colors.deepPurple,//内边距padding: EdgeInsets.all(0),//复杂装饰样式decoration: BoxDecoration(//背景色color: Colors.red,//边框圆角borderRadius: BorderRadius.all(Radius.circular(20)),//边框border: Border.all(color: Colors.deepPurple, width: 1),//线性渐变gradient: LinearGradient(//开始位置begin: Alignment(0, 0),//结束位置end: Alignment(1, 0),//颜色组colors: [Colors.blue,Colors.deepOrange,Colors.orange,]),),duration: Duration(seconds: 2),child: Text("早起的年轻人",style: TextStyle(color: Colors.white),),)

Flutter AnimatedContainer 动画使用解析相关推荐

Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...
Flutter中使用flutter_html解析html文件
1. 安装插件配置 flutter_html 插件. dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterdate_ ...
十大经典排序算法动画与解析，看我就够了
作者 | 程序员小吴转载自五分钟学算法(ID: CXYxiaowu) 排序算法是<数据结构与算法>中最基本的算法之一. 排序算法可以分为内部排序和外部排序.内部排序是数据记录在内存中进行 ...
flutter 透明度动画_Flutter中的动画填充+不透明度动画✨
flutter 透明度动画 Flutter SDK provides us with many widgets which help us in animating elements on scree ...
(转)Android属性动画完全解析(中)，ValueAnimator和ObjectAnimator的高级用法
版权声明:本文出自郭霖的博客,转载必须注明出处. 目录(?)[-] ValueAnimator的高级用法 ObjectAnimator的高级用法转载请注明出处:http://blog.csdn.ne ...
Flutter Hero动画让你的APP页面切换充满动效不一样的体验不一样的细节处理
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 本文章实现的Demo效果,如下图所示: 1 首先是页面的主体在这里使用的是Scaffold脚手架来构建 ...
android 属性动画实例,Android属性动画完全解析中，ValueAnimator和ObjectAnimator的高级用法...
大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画进行了 ...
Flutter 路由源码解析
前言这一次,我尝试以不贴一行源代码的方式向你介绍 Flutter 路由的实现原理,同时为了提高你阅读源码的积极性,除了原理介绍以外,又补充了两个新的模块:从源码中学习到的编程技巧,以及阅读源码之后 ...
Android自定义Activity切换动画完全解析
Android自定义Activity切换动画完全解析在Android开发中,Activity之间的切换是最常见的业务场景了,而且系统默认的Activity之间的切换都是带动画效果的(右进右出).但是 ...

Flutter AnimatedContainer 动画使用解析

详细使用

Flutter AnimatedContainer 动画使用解析相关推荐

最新文章

热门文章