examples/demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <style>
      * {
        box-sizing: border-box;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .demo {
        height: 200px;
        width: 200px;
        text-align: center;
        line-height: 100px;
        color: #000;
      }
      .touchpad {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        width: 100%;
        color: #fff;
        font-size: 18px;
        background: #666;
        border: 3px solid #000;
      }
      .cyan {
        background-color: cyan;
      }
      .red {
        background-color: #aa2c3f;
      }
      .yellow {
        background-color: rgb(243, 247, 6);
      }
    </style>
  </head>
  <body>
    <h4>模拟触摸板</h4>
    <div class="demo cyan" id="target">焦点元素</div>
    <p>触摸板</p>
    <div class="touchpad" id="touchpad">TouchPad</div>
    <h4>水平移动</h4>
    <div class="demo red" id="demox">x</div>
    <h4>垂直移动</h4>
    <div class="demo yellow" id="demoy">y</div>
    <script src="../dist/motion.umd.js"></script>
    <script>
      var Direction = Motion.Direction
      var Mode = Motion.Mode
      var $target = document.querySelector('#target')

      // 触摸板
      var motionx = new Motion({ target: '#touchpad' })
      var move = (() => {
        var prevX = 0
        var prevY = 0
        var prevScale = 1
        var prevAngle = 0
        return ({ x, y, scale, angle }) => {
          prevX += x
          prevY += y
          prevAngle += angle
          prevScale *= scale
          $target.style.cssText = `transform:translate3d(${prevX}px, ${prevY}px, 0) scale(${prevScale}) rotate(${prevAngle}deg);`
        }
      })()
      motionx.onTouchmove(move)
      motionx.onTouchend(move)

      // x 移动
      var motionx = new Motion({ target: '#demox', direction: Direction.x })
      var movex = (() => {
        var prev = 0
        return ({ x, y }, e) => {
          prev += x
          e.target.style.cssText = `transform:translate(${prev}px, 0px);`
        }
      })()
      motionx.onTouchmove(movex)
      motionx.onTouchend(movex)

      // y 移动
      var motiony = new Motion({ target: '#demoy', direction: Direction.y })
      var movey = (() => {
        var prev = 0
        return ({ x, y }, e) => {
          prev += y
          e.target.style.cssText = `transform:translate(0px, ${prev}px);`
        }
      })()
      motiony.onTouchmove(movey)
      motiony.onTouchend(movey)
    </script>
  </body>
</html>