Flutter轮播图效果的实现步骤
前端开发当中最有意思的就是实现动画特效,Flutter
提供的各种动画组件可以方便实现各种动画效果。Flutter
中的动画组件主要分为两类:
- 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如
AnimatedOpacity
,AnimatedSize
等组件。 - 显式动画控件:需要设置
AnimationController
,手动控制动画的执行。显式动画可以完成隐式动画的效果,甚至更加地可控和灵活,不过需要管理该动画的AnimationController
生命周期,AnimationController
并不是一个控件,所以需要将其放在StatefulWidget
中。
不难看出,隐式动画控件封装程度更高,无需管理AnimationController
的生命周期,代码因此更简单,我们开发时应该尽量选用隐式动画控件。接着我们就用隐式动画控件来实现在web当中很常见的轮播图。
FadeIn/FadeOut
AnimatedOpacity
顾名思义就是专门设置opacity
属性值变化的动画组件,其实就是类似css3
中的 transition: opacity time
,该动画组件可以实现渐隐渐现动画,下面就是实现步骤:
- 创建
StatefulWidget
; - 定义组件属性,
zIndex
(类似css
的z-index
),样式列表list,时间timer
(实现js的setTimeout
和setInterval
); - 实现动画播放的autoPlay功能,在
initState
方法中启动自动播放的动画,记得在dispose
方法回收timer相关资源; - 布局中
Stack
和Positioned
组件就是实现html中positon: relative/absolute
布局; 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事件实现手指左右滑动控制轮播图。实现的步骤和上面的一样,这里只介绍用到不同组件的地方:
移入移出动画和上面渐隐动画不同的是要同时控制两个动画元素,分别是移出和移入的元素,使用属性curr
和next
下标表示。
AnimatedContainer
组件可以控制很多的属性,可以说是实现过渡动画最常用的组件了。我们这里只需要设置transform属性即可,控制动画的属性上面已经介绍过。MediaQuery
可以查询很多全局的属性,比如高度/宽度,dpr等。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轮播图效果的实现步骤的文章就介绍到这了,更多相关Flutter轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
赞 (0)