JS+HTML5手机开发之滚动和惯性缓动实现方法分析

简介

在移动端开发中，实现滚动和惯性缓动是非常常见的功能，本文将基于JS和HTML5，详细讲解实现这一功能的方法和实现过程。本文中的代码及示例在iOS和Android均测试通过。

方法分析

滚动和惯性缓动可以通过使用CSS3的transform属性进行实现，如下所示：

.container {
  transform: translate3d(0, 0, 0);
  /* 其中第三个参数为0，表示开启GPU加速 */
}

然后使用JS监听touch事件，取得手指的滑动距离，通过JS代码实现滚动。使用touchend事件，实现惯性缓动。

具体实现过程如下：

在HTML中定义一个容器，用于存放要滚动的内容
使用CSS定义容器的样式，包括高度、宽度、overflow和transform等属性
使用JS监听touchstart、touchmove和touchend事件，调用相应的函数实现滚动和惯性缓动
编写相应的函数实现具体的滚动和惯性缓动效果

滚动实现示例

下面的代码实现了一个简单的竖直方向的滚动效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Scroll Demo</title>
  <style type="text/css">
    .container {
      height: 200px;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      transform: translate3d(0, 0, 0);
    }

    .content {
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <div class="content"></div>
  </div>
  <script type="text/javascript">
    var startY = 0, // 记录手指按下的坐标
        moveY = 0, // 记录手指滑动的距离
        currentY = 0, // 记录滑动的当前位置
        lastY = 0, // 记录上次滑动的位置
        startTime = 0, // 记录手指按下的时间
        endTime = 0, // 记录手指抬起的时间
        speed = 0, // 记录滑动速度
        timer = null, // 记录惯性缓动动画的定时器
        container = document.getElementById('container'), // 滚动容器
        content = document.querySelector('.content'); // 待滚动的内容

    container.addEventListener('touchstart', function(event) {
      startY = event.touches[0].clientY;
      currentY = container.translateY || 0;
      lastY = currentY;
      startTime = Date.now();   

      // 停止惯性缓动的动画
      cancelAnimationFrame(timer);
    });

    container.addEventListener('touchmove', function(event) {
      moveY = event.touches[0].clientY - startY;
      currentY = lastY + moveY;
      container.translateY = currentY;
      content.style.transform = 'translate3d(0,' + currentY + 'px,0)';
    });

    container.addEventListener('touchend', function(event) {
      endTime = Date.now();
      speed = (currentY - lastY) / (endTime - startTime) * 1000;

      // 根据速度触发惯性缓动动画
      if (speed > 10 || speed < -10) {
        animate();
      }

      // 惯性缓动动画
      function animate() {
        var currentSpeed = speed;

        timer = requestAnimationFrame(step);

        function step() {
          currentSpeed = currentSpeed * 0.98;

          // 边界判断
          if (currentY > 0 || currentY < -(content.offsetHeight - container.clientHeight)) {
            return;
          }

          currentY = currentY - currentSpeed / 60;

          container.translateY = currentY;
          content.style.transform = 'translate3d(0,' + currentY + 'px,0)';

          if (Math.abs(currentSpeed) < 1) {
            return;
          }

          timer = requestAnimationFrame(step);
        }
      }
    });
  </script>
</body>
</html>

惯性缓动实现示例

下面的代码实现了一个简单的水平方向的惯性缓动效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Inertia Demo</title>
  <style type="text/css">
    .container {
      width: 200px;
      height: 100px;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      transform: translate3d(0, 0, 0);
    }

    .content {
      width: 1000px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <div class="content"></div>
  </div>
  <script type="text/javascript">
    var startX = 0, // 记录手指按下的坐标
        moveX = 0, // 记录手指滑动的距离
        currentX = 0, // 记录滑动的当前位置
        lastX = 0, // 记录上次滑动的位置
        startTime = 0, // 记录手指按下的时间
        endTime = 0, // 记录手指抬起的时间
        speed = 0, // 记录滑动速度
        timer = null, // 记录惯性缓动动画的定时器
        container = document.getElementById('container'), // 滚动容器
        content = document.querySelector('.content'); // 待滚动的内容

    container.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      currentX = container.translateX || 0;
      lastX = currentX;
      startTime = Date.now();   

      // 停止惯性缓动的动画
      cancelAnimationFrame(timer);
    });

    container.addEventListener('touchmove', function(event) {
      moveX = event.touches[0].clientX - startX;
      currentX = lastX + moveX;
      container.translateX = currentX;
      content.style.transform = 'translate3d(' + currentX + 'px,0,0)';
    });

    container.addEventListener('touchend', function(event) {
      endTime = Date.now();
      speed = (currentX - lastX) / (endTime - startTime) * 1000;

      // 根据速度触发惯性缓动动画
      if (speed > 10 || speed < -10) {
        animate();
      }

      // 惯性缓动动画
      function animate() {
        var currentSpeed = speed;

        timer = requestAnimationFrame(step);

        function step() {
          currentSpeed = currentSpeed * 0.98;

          // 边界判断
          if (currentX > 0 || currentX < -(content.offsetWidth - container.clientWidth)) {
            return;
          }

          currentX = currentX - currentSpeed / 60;

          container.translateX = currentX;
          content.style.transform = 'translate3d(' + currentX + 'px,0,0)';

          if (Math.abs(currentSpeed) < 1) {
            return;
          }

          timer = requestAnimationFrame(step);
        }
      }
    });
  </script>
</body>
</html>