前端開發當中最有意思的就是實現動畫特效，Flutter提供的各種動畫元件可以方便實現各種動畫效果。Flutter中的動畫元件主要分為兩類：

• 隱式動畫控制元件：只需設定元件開始值，結束值，執行時間，比如AnimatedOpacity，AnimatedSize等元件。
• 顯式動畫控制元件：需要設定AnimationController，手動控制動畫的執行。顯式動畫可以完成隱式動畫的效果，甚至更加地可控和靈活，不過需要管理該動畫的AnimationController生命週期，AnimationController並不是一個控制元件，所以需要將其放在StatefulWidget中。

不難看出，隱式動畫控制元件封裝程度更高，無需管理AnimationController

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),width: width,child: Image.network(list[i],height:double.infinity,fit: BoxFit.cover)))
          .toList())));
 }
}

到此這篇關於Flutter輪播圖效果的實現步驟的文章就介紹到這了,更多相關Flutter輪播圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！