Flutter轮播图

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

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

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

FadeIn/FadeOut

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

  1. 创建StatefulWidget
  2. 定义组件属性,zIndex(类似cssz-index),样式列表list,时间timer(实现js的setTimeoutsetInterval);
  3. 实现动画播放的autoPlay功能,在initState方法中启动自动播放的动画,记得在dispose方法回收timer相关资源;
  4. 布局中StackPositioned组件就是实现html中 positon: relative/absolute布局;
  5. AnimatedOpacity 组件中的opacity是必须设置的属性,curve属性与css3中 动画函数一样,duration 就是动画持续的时间。
    fade.gif
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. 移入移出动画和上面渐隐动画不同的是要同时控制两个动画元素,分别是移出和移入的元素,使用属性currnext下标表示。
  2. AnimatedContainer组件可以控制很多的属性,可以说是实现过渡动画最常用的组件了。我们这里只需要设置transform属性即可,控制动画的属性上面已经介绍过。
  3. MediaQuery 可以查询很多全局的属性,比如高度/宽度,dpr等。
  4. GestureDetector是一个事件的包装器,这里使用到了onHorizontalDragStartonHorizontalDragUpdateonHorizontalDragEnd这三个事件,即横向拖动相关的事件。
    slide.gif
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())));
  }
}
posted @ 2020-07-02 09:32  Jeff.Zhong  阅读(219)  评论(0编辑  收藏