Flutter轮播图

前端开发当中最有意思的就是实现动画特效，Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中的动画组件主要分为两类：

• 隐式动画控件：只需设置组件开始值，结束值，执行时间，比如AnimatedOpacity，AnimatedSize等组件。
• 显式动画控件：需要设置AnimationController，手动控制动画的执行。显式动画可以完成隐式动画的效果，甚至更加地可控和灵活，不过需要管理该动画的AnimationController生命周期，AnimationController并不是一个控件，所以需要将其放在StatefulWidget中。

不难看出，隐式动画控件封装程度更高，无需管理AnimationController的生命周期，代码因此更简单，我们开发时应该尽量选用隐式动画控件。接着我们就用隐式动画控件来实现在web当中很常见的轮播图。

FadeIn/FadeOut

AnimatedOpacity顾名思义就是专门设置opacity属性值变化的动画组件，其实就是类似css3 中的 transition: opacity time，该动画组件可以实现渐隐渐现动画，下面就是实现步骤：

1. 创建StatefulWidget；
2. 定义组件属性，zIndex（类似css的z-index），样式列表list，时间timer（实现js的setTimeout和setInterval）；
3. 实现动画播放的autoPlay功能，在initState方法中启动自动播放的动画，记得在dispose方法回收timer相关资源；
4. 布局中Stack和Positioned组件就是实现html中 positon: relative/absolute布局；
5. AnimatedOpacity 组件中的opacity是必须设置的属性，curve属性与css3中 动画函数一样，duration 就是动画持续的时间。
   

class OpacityBanner extends StatefulWidget { @override _OpacityBannerState createState() => _OpacityBannerState();}class _OpacityBannerState extends State<OpacityBanner> { int zIndex = 0; List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00']; Timer timer; //setInterval控制当前动画元素的下标，实现动画轮播 autoPlay() { var second = const Duration(seconds: 2); timer = Timer.periodic(second, (t) {  setState(() {  zIndex = (++zIndex) % list.length;  }); }); } @override void initState() { super.initState(); timer = Timer(Duration(seconds: 2), autoPlay); } @override void dispose() { if (timer != null) timer.cancel(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: Stack(alignment: Alignment.center, children: [  Stack(   children: list    .asMap()    .keys    .map<Widget>((i) => AnimatedOpacity(     curve: Curves.easeIn,     duration: Duration(milliseconds: 600),     opacity: i == zIndex ? 1 : 0,     child: Container(      color: Color(int.parse(list[i], radix: 16)).withAlpha(255),      height: 300, //100%     ),     ))    .toList()),  Positioned(   bottom: 20,   child: Row(    children: list     .asMap()     .keys     .map((i) => Container(      width: 10,      height: 10,      margin: EdgeInsets.symmetric(horizontal: 5),      decoration:       BoxDecoration(color: i == zIndex ? Colors.blue : Colors.grey, shape: BoxShape.circle)))     .toList())) ])); }}

怎么样？实现起来非常简单吧。

SlideIn/SlideOut

接着我们使用AnimatedContainer实现移入/移出动画，同时加上touch事件实现手指左右滑动控制轮播图。实现的步骤和上面的一样，这里只介绍用到不同组件的地方：

1. 移入移出动画和上面渐隐动画不同的是要同时控制两个动画元素，分别是移出和移入的元素，使用属性curr和next下标表示。
2. AnimatedContainer组件可以控制很多的属性，可以说是实现过渡动画最常用的组件了。我们这里只需要设置transform属性即可，控制动画的属性上面已经介绍过。
3. MediaQuery 可以查询很多全局的属性，比如高度/宽度，dpr等。
4. GestureDetector是一个事件的包装器，这里使用到了onHorizontalDragStart，onHorizontalDragUpdate，onHorizontalDragEnd这三个事件，即横向拖动相关的事件。
   

class SlideBanner extends StatefulWidget { @override _SlideBannerState createState() => _SlideBannerState();}class _SlideBannerState extends State<SlideBanner> { List<String> list = [ 'https://upload-images.jianshu.io/upload_images/127924-dec37275411437de.jpg', '//upload-images.jianshu.io/upload_images/127924-0999617a887bb6a3.jpg', '//upload-images.jianshu.io/upload_images/127924-b48e22b6aef713ae.jpg', '//upload-images.jianshu.io/upload_images/127924-b06e44e6a17caf43.jpg' ]; double dx = 0;//距离 int curr = 0;//要移出的下标 int next = 0;//要移入的下标 bool toLeft = true;//自动播放的方向，默认向左 Timer timer; /** 轮播图滑动相关 **/ dragStart(Offset offset) { dx = 0; } //累计位移距离 dragUpdate(Offset offset) { var x = offset.dx; dx += x; }	 //达到一定距离后则触发轮播图左右滑动 dragEnd(Velocity v) { if (dx.abs() < 20) return; timer.cancel(); if (dx < 0) {  //向左  if (!toLeft) {  setState(() {   toLeft = true;   curr = next - 1 < 0 ? list.length - 1 : next - 1;  });  }  setState(() {  curr = next;  next = (++next) % list.length;  }); } else {  //向右  if (toLeft) {  setState(() {   toLeft = false;   curr = (next + 1) % list.length;  });  }  setState(() {  curr = next;  next = --next < 0 ? list.length - 1 : next;  }); } //setTimeout timer = Timer(Duration(seconds: 2), autoPlay); } autoPlay() { var second = const Duration(seconds: 2); timer = Timer.periodic(second, (t) {  setState(() {  toLeft = true;  curr = next;  next = (++next) % list.length;  }); }); } @override void initState() { super.initState(); timer = Timer(Duration(seconds: 2), autoPlay); } @override void dispose() { if (timer != null) timer.cancel(); super.dispose(); } @override Widget build(BuildContext context) { final size = MediaQuery.of(context).size; final width = size.width; return Scaffold(  body: GestureDetector(   onHorizontalDragStart: (details) => dragStart(details.globalPosition),   onHorizontalDragUpdate: (details) => dragUpdate(details.delta),   onHorizontalDragEnd: (details) => dragEnd(details.velocity),   child: Stack(    children: list     .asMap()     .keys     .map((i) => AnimatedContainer(      duration: Duration(milliseconds: (i == next || i == curr) ? 600 : 0),      curve: Curves.easeIn,      transform: Matrix4.translationValues(       i == next ? 0 : i == curr ? (toLeft ? -width : width) : (toLeft ? width : -width), 0, 0),      width: width,      height: 300,      child: Image.network(list[i], width: width, height:double.infinity ,fit: BoxFit.cover)))     .toList()))); }}

Flutter轮播图net-a-porter、 yiqu、 美森、 2019跨境电商父亲节营销，你想了解的都在这里、 跨境快讯：亚马逊开拓新零售领域,Lazada最大物流中心将启用、 亚马逊专员---深圳（5000--12000+）、 珠海免费旅游景点大全、 珠海免费旅游景点大全、 珠海免费旅游景点大全、