使用Flutter仿寫TikTok的手勢交互(二)

時間 2019-11-29

標籤使用 flutter tiktok 手勢交互简体版

原文原文鏈接

寫在前面

Flutter 是 Google推出並開源的移動應用開發框架，主打跨平臺、高保真、高性能。開發者能夠經過 Dart語言開發 App，一套代碼同時運行在 iOS 和 Android平臺。html

Flutter官網：flutter-io.cngit

在上一篇手勢交互的文章中，咱們瞭解了GestureDetector、Transform以及Hero動畫，並完成了幾個TikTok中的手勢交互效果，本文繼續前文的內容，若是你再看看上一篇內容，能夠查看如下連接：github

使用Flutter仿寫TikTok的手勢交互:dwz.cn/xoY8eDs0編程

來看看本次實現的效果：bash

Gif：user-gold-cdn.xitu.io/2019/4/25/1…markdown

Github地址：github.com/ditclear/ti…框架

下載體驗

交互分解

本次主要包含兩個下拉的交互：下拉刷新和下拉返回。ide

下拉刷新

Gif：user-gold-cdn.xitu.io/2019/4/25/1…性能

隨着手指的向下滑動，offsetY的改變，這裏有兩個變化：動畫

透明度
y軸方向的偏移

透明度這裏能夠採用Flutter提供的Opacity部件，這是專門用來進行透明度變化的，用法也很簡單。

Opacity(
  opacity: currentOpacity,
  child:childWidget
)  
複製代碼

傳入opacity便可，咱們要作的也就是將opacity的值用offsetY表示出來。

值得注意的是這裏有兩個透明度的變化:頂部導航欄和下拉刷新內容的文本。

並且兩者不會同時出現，當下拉時，頂部導航欄逐漸變爲透明，到必定距離時(能夠認爲是最大下拉距離的一半)就隱藏，下拉刷新內容的文本纔會出現，並且其透明度逐漸變爲不透明。

咱們把下拉的最大滑動距離設爲40，那麼這個臨界點就是20。

由此能夠得出頂部導航欄隨着下拉距離透明度變化的公式。

opacity = 1 - offsetY / 20

由於offsetY最大可能爲40，而opacity必須在0到1之間。所以最後得出的公式是：

opacity = max(0, 1 - offsetY / 20)

具體實現：

當下拉的時候，記錄下偏移總量offsetY，控制其大於0而且不超過最大距離便可。

onVerticalDragUpdate: (details) {
        final tempY = offsetY + details.delta.dy / 2;
        if (currentIndex == 0) {
          //最大下拉距離不超過40
          if (tempY > 0) {
            if (tempY < 40) {
              setState(() {
                offsetY = tempY;
              });
            } else if (offsetY != 40) {
              setState(() {
                setState(() {
                  offsetY = 40;
                });
              });
              // 當下拉到最大距離時，觸發震動效果
              vibrate();
            }
          }
        } else {
          offsetY = 0;
        }
      }

複製代碼

當下拉到最大距離時，可使用vibrate來產生震動效果。

當手指離開屏幕時，再進行一個動畫，將OffsetY設置爲0，並經過setState通知UI從新渲染。

// 下拉結束
onVerticalDragEnd: (_) {
    if (offsetY != 0) {
       animateToTop();
     }
}

/// 滑動到頂部
///
/// [offsetY] to 0.0
void animateToTop() {
  animationControllerY =
      AnimationController(duration: Duration(milliseconds: offsetY.abs() * 1000 ~/ 40), vsync: this);
  final curve = CurvedAnimation(parent: animationControllerY, curve: Curves.easeOutCubic);
  animationY = Tween(begin: offsetY, end: 0.0).animate(curve)
    ..addListener(() {
      setState(() {
        offsetY = animationY.value;
      });
    });
  animationControllerY.forward();
}
複製代碼

下拉返回

Gif:user-gold-cdn.xitu.io/2019/4/25/1…

簡單的講就是下拉的時候，對整個頁面進行一個Y軸方向的偏移，當超過一個指定的距離的時候，退出這個頁面便可。

// 滑動截止時
onPanEnd: (_) {
  if (offsetY > 100) {
    // 下拉距離超過100，即退出頁面
    Navigator.pop(context);
  } else if (offsetY > 0) {
    // 下拉距離小於100，恢復原樣
    animateToBottom(screenHeight);
  } else if (offsetY < 0) {
    // 上拉根據是否已經顯示評論框 [isCommentShow]和offsetY來判斷是展開仍是收縮
    if (!isCommentShow && offsetY.abs() > screenHeight * 0.2) {
      if (offsetY.abs() > screenHeight * 0.2) {
        animateToTop(screenHeight);
      } else {
        animateToBottom(screenHeight);
      }
    } else {
      if (offsetY.abs() > screenHeight * 0.4) {
        animateToTop(screenHeight);
      } else {
        animateToBottom(screenHeight);
      }
    }
  }
},
複製代碼

頁面偏移的話，在最外層套一層Transform.translate，注意偏移量須要大於0。

Transform.translate(
  offset: Offset(0, max(0, offsetY)),
  child: childWidget
  ）
複製代碼

當你完成了上訴的基本邏輯時，運行以後會發現跟預想的仍是有些出入。

背景不透明，當時我認爲是有一個黑色的背景，須要設置背景色的透明度，但是在ThemeData裏的各類可疑的顏色都試過，發現並無什麼用，後來想到應該是PageRoute的緣由。

在咱們調用Navigator進行push操做的時候，都須要傳入一個PageRoute，好比說經常使用的MaterialPageRoute或者CupertinoPageRoute，在PageRoute裏有一個opaque，不透明的意思，並且一直爲true。

@override
bool get opaque => true;
複製代碼

爲了解決上述問題，這裏copy了一份MaterialPageRoute的源碼而後將opaque改成false就能夠了。

/// copy 一份 MaterialPageRoute，修改opaque
class TransparentPage<T> extends PageRoute<T> {
  //...
  /// false 表明背景透明
  @override
  bool get opaque => false;
   
  //... 
}
複製代碼

最後，在上一篇文章中有同窗問如何在列表中進行Hero動畫，在代碼中也模擬了一下，保證Hero的tag相同便可，Flutter會在新舊路由切換的時候，對相同tag的Hero部件進行動畫。

/// detail_page.dart
child: Hero(
  tag: "detail_$currentIndex",
  child: GestureDetector(
      child:PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
          //..
         ),
      ),
    )
    
/// right_page.dart
child: Hero(
      tag: "detail_0",
      child: Image.asset(
             assets/detail.png",
             fit: BoxFit.fill,
       ),
   ),
複製代碼