美文网首页Web前端之路前端开发
数学的 H5 应用:拖动阻尼

数学的 H5 应用:拖动阻尼

作者: 西山以南 | 来源:发表于2019-05-28 01:29 被阅读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 对象就会包含该触点;

    处理流程如下:

    1. 当有新触点接触平面时,touchstart 事件被触发,以 Touch.identifierid 缓存触点起始坐标;
    2. 触点移动时,touchmove 事件被触发,根据 id 计算各个触点当前位置与起始坐标的偏移值并求和;
    3. 当有触点从平面中释放时,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

    相关文章

      网友评论

        本文标题:数学的 H5 应用:拖动阻尼

        本文链接:https://www.haomeiwen.com/subject/vyzraqtx.html