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