使用Flutter仿写TikTok的手势交互

逃离我推掉我的手 2022-10-01 09:53 90阅读 0赞

### 写在前面 ###

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。

> Flutter官网：[flutter-io.cn][]

抖音，英文名TikTok，一款火遍全球的短视频App。在玩抖音的日子里，最令我感到舒服的就是抖音的手势交互，加上近期都在进行Flutter方面的学习，因此就产生了使用Flutter来仿写TikTok手势交互的想法。

来看看实现的效果：

> Gif：[giphy.com/gifs/Y0nMQw…][giphy.com_gifs_Y0nMQw]
> 
> Github地址：[github.com/ditclear/ti…][github.com_ditclear_ti]

**demo下载**:

### GestureDetector以及Transform ###

既然是手势交互，那么就必然要检测手势，在Flutter中提供了`GestureDetector`来帮助开发者，并提供了多个回调来处理手势。

<table> 
 <thead> 
  <tr> 
   <th>Property/Callback</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onTapDown</td> 
   <td>用户每次和屏幕交互时都会被调用</td> 
  </tr> 
  <tr> 
   <td>onTapUp</td> 
   <td>用户停止触摸屏幕时触发</td> 
  </tr> 
  <tr> 
   <td>onTap</td> 
   <td>短暂触摸屏幕时触发</td> 
  </tr> 
  <tr> 
   <td>onTapCancel</td> 
   <td>用户触摸了屏幕，但是没有完成Tap的动作时触发</td> 
  </tr> 
  <tr> 
   <td>onDoubleTap</td> 
   <td>用户在短时间内触摸了屏幕两次</td> 
  </tr> 
  <tr> 
   <td>onLongPress</td> 
   <td>用户触摸屏幕时间超过500ms时触发</td> 
  </tr> 
  <tr> 
   <td>onVerticalDragDown</td> 
   <td>当一个触摸点开始跟屏幕交互，同时在垂直方向上移动时触发</td> 
  </tr> 
  <tr> 
   <td>onVerticalDragStart</td> 
   <td>当触摸点开始在垂直方向上移动时触发</td> 
  </tr> 
  <tr> 
   <td>onVerticalDragUpdate</td> 
   <td>屏幕上的触摸点位置每次改变时，都会触发这个回调</td> 
  </tr> 
  <tr> 
   <td>onVerticalDragEnd</td> 
   <td>当用户停止移动，这个拖拽操作就被认为是完成了，就会触发这个回调</td> 
  </tr> 
  <tr> 
   <td>onVerticalDragCancel</td> 
   <td>用户突然停止拖拽时触发</td> 
  </tr> 
  <tr> 
   <td>onHorizontalDragDown</td> 
   <td>当一个触摸点开始跟屏幕交互，同时在水平方向上移动时触发</td> 
  </tr> 
  <tr> 
   <td>onHorizontalDragStart</td> 
   <td>当触摸点开始在水平方向上移动时触发</td> 
  </tr> 
  <tr> 
   <td>onHorizontalDragUpdate</td> 
   <td>屏幕上的触摸点位置每次改变时，都会触发这个回调</td> 
  </tr> 
  <tr> 
   <td>onHorizontalDragEnd</td> 
   <td>水平拖拽结束时触发</td> 
  </tr> 
  <tr> 
   <td>onHorizontalDragCancel</td> 
   <td>onHorizontalDragDown没有成功完成时触发</td> 
  </tr> 
  <tr> 
   <td>onPanDown</td> 
   <td>当触摸点开始跟屏幕交互时触发</td> 
  </tr> 
  <tr> 
   <td>onPanStart</td> 
   <td>当触摸点开始移动时触发</td> 
  </tr> 
  <tr> 
   <td>onPanUpdate</td> 
   <td>屏幕上的触摸点位置每次改变时，都会触发这个回调</td> 
  </tr> 
  <tr> 
   <td>onPanEnd</td> 
   <td>pan操作完成时触发</td> 
  </tr> 
  <tr> 
   <td>onScaleStart</td> 
   <td>触摸点开始跟屏幕交互时触发，同时会建立一个焦点为1.0</td> 
  </tr> 
  <tr> 
   <td>onScaleUpdate</td> 
   <td>跟屏幕交互时触发，同时会标示一个新的焦点</td> 
  </tr> 
  <tr> 
   <td>onScaleEnd</td> 
   <td>触摸点不再跟屏幕有任何交互，同时也表示这个scale手势完成</td> 
  </tr> 
 </tbody> 
</table>

`GestureDetector`并不会监听上面所有的手势，只有传入的callbacks非空时，才会监听。所以，如果你想要禁用某个手势时，可以给对应的callback传null。

本文主要关注的的是拖动相关的，比如`onPanXX`、`onHorizontalDragXX`、`onVerticalDragXX`等等回调事件。

**Transform**可以在其子Widget绘制时对其应用一个矩阵变换（transformation）,Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作。

Container(
      color: Colors.black,
      child: new Transform(
        alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
        transform: new Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
        child: new Container(
          padding: const EdgeInsets.all(8.0),
          color: Colors.deepOrange,
          child: const Text('Apartment for rent!'),
        ),
      ),
    );
    复制代码

效果如下：

在Flutter中提供了一些封装好的transform效果供开发者选择，比如：平移(translate)、旋转(rotate)、缩放(scale)。

在了解了这两点之后，我们来逐步分解前文的效果。

### 交互分解 ###

首先，需要明确的是这些交互效果其实都是通过检测手指的滑动，得到一个x坐标或者y坐标的偏移量，然后配合Transform进行各种不同的变换，明白了这一点，想做到这样的效果并不难。

*  #### 首页的交互 ####

> Gif :[user-gold-cdn.xitu.io/2019/4/20/1…][user-gold-cdn.xitu.io_2019_4_20_1]

这里的交互都是横向的滑动，因此这里主要处理`onHorizontalDragXX`相关的事件。

然后来看看首页的布局：

> Left:拍摄页 Middle:主页 Right：用户页

外层是一个`GestureDetector`用于处理整个页面的手势，里面用的是一个`Stack`，类似于Android中的`FrameLayout`，它包含3个`Transform`的子Widget。

这里选取拍摄页(left)来具体谈谈.

通过观察可以发现，**随着偏移量的改变，这里其实包含两个变化：1.缩放 2. 前景色透明度**。

缩放可以直接采用前文提到的`Transform.scale`，前景色可以用`foregroundDecoration`通过改变Color的透明度来达到效果，看看实现：

/// 左侧Widget
    ///
    /// 通过 [Transform.scale] 进行根据 [offsetX] 缩放
    /// 最小 0.88 最大为 1
    Transform buildLeftPage(double screenWidth) {
      return Transform.scale(
        scale: 0.88 + 0.12 * offsetX / screenWidth < 0.88 ? 0.88 : 0.88 + 0.12 * offsetX / screenWidth,
        child: Container(
          child: Image.asset(
            "assets/left.png",
            fit: BoxFit.fill,
          ),
          foregroundDecoration: BoxDecoration(
              color: Color.fromRGBO(0, 0, 0, 1 - (offsetX / screenWidth)),
             ),
        ),
      );
    }
    复制代码

当我们的手指在横向移动的时候，记录下偏移总量`offsetX`，然后通过setState进行更新。

onHorizontalDragUpdate: (details) {
      // 控制 offsetX 的值在 -screenWidth 到 screenWidth 之间
      if (offsetX + details.delta.dx >= screenWidth) {
        setState(() {
          offsetX = screenWidth;
        });
      } else if (offsetX + details.delta.dx <= -screenWidth) {
        setState(() {
          offsetX = -screenWidth;
        });
      } else {
        setState(() {
          offsetX += details.delta.dx;
        });
      }
    }
    复制代码

通过setState更新偏移量offsetX之后，Flutter便会重新渲染视图，从而达到上图的效果。

*  #### Hero动画 ####

> Gif：[user-gold-cdn.xitu.io/2019/4/20/1…][user-gold-cdn.xitu.io_2019_4_20_1 1]

Flutter提供了Hero动画来实现这样的过渡效果。Hero指的是可以在路由(页面)之间“飞行”的widget，简单来说Hero动画就是在路由切换时，有一个共享的Widget可以在新旧路由间切换，由于共享的Widget在新旧路由页面上的位置、外观可能有所差异，所以在路由切换时会逐渐过渡，这样就会产生一个Hero动画。

/// tiktok_page.dart
    Widget build(BuildContext context) {
    		return	Hero(
                  tag: "detail",
                  //child
                )
     )               
     
     /// detail_page.dart
     Widget build(BuildContext context) {
    	return Hero(
          tag: "detail",
          // child
            )
      }
    复制代码

保证tag一致就可以了。

*  #### 详情页的交互 ####

> Gif :[user-gold-cdn.xitu.io/2019/4/20/1…][user-gold-cdn.xitu.io_2019_4_20_1 2]

跟首页一样的思路，只是这里的手势是垂直方向。

布局同样是`GestureDetector`加上`Stack`再配合`Transform.translate`。

Hero(
          tag: "detail",
          child: GestureDetector(
            onVerticalDragUpdate: (details){
              // dy 不超过 -screenHeight * 0.6
              dy += details.delta.dy;
              if ((dy < 0 && dy.abs() > screenHeight * 0.6)) {
                dy = -screenHeight * 0.6;
              } else {
                setState(() {});
              }
            },
            child: Stack(
              children: <Widget>[
                Image.asset(
                  "assets/detail.png",
                  fit: BoxFit.fitWidth,
                  width: screenWidth,
                  height: screenHeight,
                ),
                Transform.translate(
                  offset: Offset(0, dy + screenHeight),
                  child: Container(
                      height: screenHeight * 0.6,
                      child: GestureDetector(
                        onTap: () {},
                        child: Image.asset(
                            "assets/comment.png",),
                      )
                  ),
                ),
              ],
            ),
          ),
        );
    复制代码

在手指离开屏幕时，根据偏移利用动画进行调整。

onVerticalDragEnd: (_){
              // 滑动截止时，根据 dy 判断是展开还是回缩
              if (dy < 0) {
                if (!isCommentShow && dy.abs() > screenHeight * 0.2) {
                  if (dy.abs() > screenHeight * 0.2) {
                    animateToTop(screenHeight);
                  } else {
                    animateToBottom(screenHeight);
                  }
                } else {
                  if (dy.abs() > screenHeight * 0.4) {
                    animateToTop(screenHeight);
                  } else {
                    animateToBottom(screenHeight);
                  }
                }
              }
            },
    复制代码

### 写在最后 ###

总的来说，这些交互都是依靠着对手势的检测做到的，相比于Android，Flutter有着一切都是Widget的概念，

`GestureDetector`以及`Hero`都是Widget而且提供了很多回调函数，再配合数据驱动UI和Flutter优秀的渲染机制，减轻了开发者进行手势交互的难度。

Github地址：[github.com/ditclear/ti…][github.com_ditclear_ti]

如果本文对你有帮助，请点赞支持。

#### 参考资料： ####

*  Flutter实战：[book.flutterchina.club/][book.flutterchina.club]
 *  解析Flutter中的手势控制Gestures：[www.jianshu.com/p/228b2d043…][www.jianshu.com_p_228b2d043]

==================== 分割线 ======================

如果你想了解更多关于MVVM、Flutter、响应式编程方面的知识，欢迎关注我。

#### 你可以在以下地方找到我： ####

简书：[www.jianshu.com/u/117f1cf0c…][www.jianshu.com_u_117f1cf0c]

掘金：[juejin.im/user/582d60…][juejin.im_user_582d60]

Github: [github.com/ditclear][github.com_ditclear]

转载于:https://juejin.im/post/5cbadb71f265da037c7ce19f

[flutter-io.cn]: https://link.juejin.im?target=https%3A%2F%2Fflutter-io.cn
[giphy.com_gifs_Y0nMQw]: https://link.juejin.im?target=https%3A%2F%2Fgiphy.com%2Fgifs%2FY0nMQwaOg14vWmwQDz
[github.com_ditclear_ti]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fditclear%2Ftiktok_gestures
[user-gold-cdn.xitu.io_2019_4_20_1]: https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2019%2F4%2F20%2F16a39ea149156433%3Fw%3D224%26amp%3Bh%3D480%26amp%3Bf%3Dgif%26amp%3Bs%3D822841
[user-gold-cdn.xitu.io_2019_4_20_1 1]: https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2019%2F4%2F20%2F16a39e9400cdc12c%3Fw%3D224%26amp%3Bh%3D480%26amp%3Bf%3Dgif%26amp%3Bs%3D287437
[user-gold-cdn.xitu.io_2019_4_20_1 2]: https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2019%2F4%2F20%2F16a39e940f79e62b%3Fw%3D224%26amp%3Bh%3D480%26amp%3Bf%3Dgif%26amp%3Bs%3D253461
[book.flutterchina.club]: https://link.juejin.im?target=https%3A%2F%2Fbook.flutterchina.club%2F
[www.jianshu.com_p_228b2d043]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F228b2d043bca
[www.jianshu.com_u_117f1cf0c]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fu%2F117f1cf0c556
[juejin.im_user_582d60]: https://juejin.im/user/582d601d2e958a0069bbe687
[github.com_ditclear]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fditclear