数学的 H5 应用：拖动阻尼

2019-05-28 本文已影响8人西山以南

我们在 ios 应用（特别是浏览器）中经常看到这样的 “橡皮筋” 效果：当页面滚动到边缘时若继续拖动，其位移变化量和拖动距离成反比；就像橡皮筋一样，拉动的距离越大则继续发生形变的难度越大，也就是所受到的阻尼力越大：

接下来我会基于 vue 和移动端 Touch 事件实现这样的 “橡皮筋” 效果。

阻尼曲线

以横坐标为 拖动距离，纵坐标为 实际位移 建立坐标轴。如此，符合 “橡皮筋” 效果的数学函数模型并不难找，我在这里提供两个基础函数模型，对数函数 和 幂函数：

$f(x)=\log_a x，a > 1$ $f(x)=x^a，0<a<1$

各自对应的函数图像趋势大致如下：

为了满足 H5 向下拖动的实际场景，我们需要对函数体进行微调。此外，还需要设置一个 容器高度值 $M$ 作为被拖动元素的位移最大值的参考。那么函数调整为：

$f_{1}(x)=0.08M\ln (x+1)$ $f_{2}(x)=0.12M\sqrt[5]{x}$

不妨设 $M=500$ ，绘制函数图像：

可见曲线差距不大，我们选择基于幂函数 $f_{2}(x)$ 来制作 demo：

如 gif 图所示，在刚开始往下拖动的阶段，元素发生了较大幅度的跳动，这是由于该阶段的函数值 $f(x)>x$ ，也就是元素的位移甚至比手指拖动的距离还要大，从而产生不合理的 “跳动”。

使 $60\sqrt[5]{x}=x$ ，借助 WolframAlpha计算引擎求解得 $x=60\sqrt{2} \sqrt[4]{15}\approx 167$ ，因此在 $x\subseteq (0, 167)$ 的区间内， $f(x)$ 都是比 $x$ 大的。

换句话说，我们需要 降低函数图像曲线首段的陡度，使元素随手指拖动的变化幅度更加平缓。由于数学水平有限，我在这里仅提供一种比较麻烦的方式 —— 分段线性函数。

以 ios 原生的 “橡皮筋” 效果为参考，经过大量的测试，我刻画出了一套较为合理的分段线性函数：

$f(x)=0.18x，0\leq x \leq M$ $f(x)=0.14(x-M)+f(M)=0.14x+0.04M，M < x \leq 2M$ $f(x)=0.1(x-2M)+f(2M)=0.1x+0.12M，2M < x \leq 3M$ $f(x)=0.05(x-3M)+f(3M)=0.05x+0.27M，3M < x \leq 5M$ $f(x)=0.025(x-5M)+f(5M)=0.025x+0.395M，5M < x \leq 12M$ $f(x)=0.005(x-12M)+f(12M)=0.005x+0.635M，x > 12M$

同样地使 $M=500$ ，绘制函数图像：

demo 实际效果：

函数效率

对于 JS 引擎来说，简单的线性四则运算要比复杂的幂函数、对数函数等运算耗时更短，性能损耗更低。但是在拖动阻尼的场景下，由于实现分段线性函数需要利用循环和声明更多的临时变量，代码性能往往比单单调用 Math.pow() 或 Math.log() 方法要低很多。

我对上述中的三种函数模型都分别提供了代码实现及测试用例：

linear: 分段线性函数，log: 对数函数，pow: 幂函数

性能差距惨不忍睹…

那么，我们能否找出一个合适的数学表达式，既能符合或近似于上面提出的分段线性函数的图像曲线，又能降低性能损耗呢？

曲线拟合

在分段线性函数的图像上取样关键点：

x	0	500	1000	1500	2500	6000	8000	10000	12000
y	0	90	160	210	260	347.5	357.5	367.5	377.5

通过在线曲线拟合神器，使用 四参数方程模型 拟合曲线，得

$f(x)=\frac{411.1554946226406}{1+(\frac{x}{1474.56037919441})^-1.14790922934943}-0.5843254514396$

如果有条件的话，这里建议使用 matlab 做曲线拟合。

舍去 $-0.5843254514396$ ，其他常数四舍五入，并化简表达式，得

$f(x)=\frac{411.155}{1+\frac{4338.47}{x^1.14791}}$

通过 Wolfram Cloud平台绘制该表达式在 $x\subseteq [0, 12000]$ 范围的图像曲线：

Prefect!

然而这个表达式是在 $M=500$ 的条件下的，我们需要还原 $M$ 值，最终表达式为

$f(x)=\frac{M}{500}*\frac{411.155}{1+\frac{4338.47}{x^1.14791}}= \frac{0.82231M}{1+\frac{4338.47}{x^1.14791}}$

瞧瞧性能表现：

curve: 拟合函数，linear: 分段线性函数，log: 对数函数，pow: 幂函数

多点触控

在元素拖动的交互场景里，实现多点触控其实非常简单，主要围绕 TouchEvent 事件中的

TouchEvent.touches 对象
包含所有当前接触触摸平面的触点的 Touch 对象；
TouchEvent.changedTouches 对象
包含从上一次触摸事件到此次事件过程中状态发生改变的触点的 Touch 对象。譬如某个触点从触摸平面中释放时，touchend 事件中的 changedTouches 对象就会包含该触点；

处理流程如下：

当有新触点接触平面时，touchstart 事件被触发，以 Touch.identifier 为 id 缓存触点起始坐标；
触点移动时，touchmove 事件被触发，根据 id 计算各个触点当前位置与起始坐标的偏移值并求和；
当有触点从平面中释放时，touchend 事件被触发，记录该触点所“贡献”的偏移值，若所有触点都已释放则重置；

代码实现

提供的 demo 仅支持在移动端预览：https://codepen.io/JunreyCen/pen/LoryNp

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <style>
      body, ul {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 80%;
        width: 80%;
        max-width: 300px;
        max-height: 500px;
        border: 1px solid #000;
        transform: translateY(-50%);
        overflow: hidden;
      }
      .list {
        background-color: #70f3b7;
        transition-timing-function: cubic-bezier(.165, .84, .44, 1);
      }
      .list-item {
        height: 40px;
        line-height: 40px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  
    <template id="tpl">
      <div
        class="wrapper"
        ref="wrapper"
        @touchstart.prevent="onStart"
        @touchmove.prevent="onMove"
        @touchend.prevent="onEnd"
        @touchcancel.prevent="onEnd">
        <ul
          class="list"
          ref="scroller"
          :style="scrollerStyle">
          <li 
            class="list-item"
            v-for="item in list">
            {{item}}
          </li>
        </ul>
      </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      new Vue({
        el: '#app',
        template: '#tpl',
        computed: {
          list() {
            const list = [];
            for (let i = 0; i < 100; i++) {
              list.push(i);
            }
            return list;
          },
          scrollerStyle() {
            return {
              'transform': `translate3d(0, ${this.offsetY}px, 0)`,
              'transition-duration': `${this.duration}ms`,
            };
          },
        },
        data() {
          return {
            wrapper: null,
            scroller: null,
            minY: 0,
            maxY: 0,
            wrapperHeight: 0,
            offsetY: 0,
            duration: 0,
            pos: {},
            cacheOffsetY: 0,
          };
        },
        mounted() {
          this.$nextTick(() => {
            this.wrapper = this.$refs.wrapper;
            this.scroller = this.$refs.scroller;
            const { height: wrapperHeight } = this.wrapper.getBoundingClientRect();
            const { height: scrollHeight } = this.scroller.getBoundingClientRect();
            this.wrapperHeight = wrapperHeight;
            this.minY = wrapperHeight - scrollHeight;
          });
        },
        methods: {
          onStart(e) {
            this.duration = 0;
            this.stop();
            // 是否为第一个触点，若是则需要重置 cacheOffsetY 值
            let isFirstTouch = true;
            Array.from(e.touches).forEach(touch => {
              const id = touch.identifier;
              if (!this.pos[id]) {
                this.pos[id] = touch.pageY;
                return;
              }
              isFirstTouch = false;
            });
            if (isFirstTouch) {
              this.cacheOffsetY = this.offsetY;
            }
          },
          onMove(e) {
            let offset = 0;
            Array.from(e.touches).forEach(touch => {
              const id = touch.identifier;
              if (this.pos[id]) {
                offset += Math.round(touch.pageY - this.pos[id]);
              }
            });
            offset = this.cacheOffsetY + offset;
            // 超出边界时增加阻尼效果
            if (offset < this.minY || offset > this.maxY) {
              this.offsetY = this.damping(offset, this.wrapperHeight);
            } else {
              this.offsetY = offset;
            }
          },
          onEnd(e) {
            Array.from(e.changedTouches).forEach(touch => {
              const id = touch.identifier;
              if (this.pos[id]) {
                this.cacheOffsetY += Math.round(touch.pageY - this.pos[id]);
              }
            });
            // 当所有触点都离开平面
            if (!e.touches.length) {
              this.cacheOffsetY = 0;
              this.pos = {};
              this.resetPosition();
            }
          },
          stop() {
            // 获取当前 translate 的位置
            const matrix = window.getComputedStyle(this.scroller).getPropertyValue('transform');
            this.offsetY = Math.round(+matrix.split(')')[0].split(', ')[5]);
          },
          // 超出边界时重置位置
          resetPosition() {
            let offsetY;
            if (this.offsetY < this.minY) {
              offsetY = this.minY;
            } else if (this.offsetY > this.maxY) {
              offsetY = this.maxY;
            }
            if (typeof offsetY !== 'undefined') {
              this.offsetY = offsetY;
              this.duration = 500;
            }
          },
          // 阻尼函数
          damping(x, max) {
            let y = Math.abs(x);
            y = 0.82231 * max / (1 + 4338.47 / Math.pow(y, 1.14791));
            return Math.round(x < 0 ? -y : y);
          },
        },
      });
    </script>
  </body>
</html>

Reference

MDN: TouchEvent