亲宝软件园·资讯

展开

Flutter轮播图 Flutter轮播图效果的实现步骤

Jeff.Zhong 人气:8

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

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

FadeIn/FadeOut

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

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事件实现手指左右滑动控制轮播图。实现的步骤和上面的一样,这里只介绍用到不同组件的地方:

移入移出动画和上面渐隐动画不同的是要同时控制两个动画元素,分别是移出和移入的元素,使用属性currnext下标表示。

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())));
 }
}

加载全部内容

相关教程
猜你喜欢
用户评论