前端系统课程 - 24. 给简历添加 JavaScript (2)

动画

• 用 JavaScript 实现动画的关键是 window.setInterval() 这个全局方法，这个方法称为循环定时器，与前面学到的延迟定时器 setTimeout() 使用方法类似；

• 页面滚动动画思路：

  • 使用 window.pageXOffset 属性获取当前页面滚动位置 currentTop，以及通过元素的 offsetTop 属性值来设定滚动目标位置 targetTop；

  • 设定到目标位置的滚动总次数 n，当前滚动次数 x；

  • 设定每次滚动的时间 t 为预设动画完成时间 / 滚动总次数，例如：

    t = 200 / n；

  • 设定每次滚动的距离 step 为 (目标滚动位置 - 当前滚动位置) / 滚动总次数，即：

    step = (targetTop - currentTop) / n；

  • 最后设置循环定时器，通过 window.scrollTo() 方法，在指定时间使页面滚动到指定位置，每次滚动之前，当前滚动次数加 1；在当前滚动次数达到设定的总次数后，说明已到达目标位置，此时便使用 clearInterval() 方法清除定时器，动画结束。下面是示例代码：

    var currentTop = window.pageYOffset, // 当前滚动位置
        targetTop = getOffsetTop(id) < 200 ? 80 : getOffsetTop(id), // 目标滚动位置
        n = 25, // 滚动总次数
        x = 0, // 当前滚动次数
        t = 200 / n, // 每次滚动时间
        step = (targetTop - currentTop) / n, // 每次滚动距离
        timer = setInterval(function () {
            if (x === n) { // 当前滚动次数达到总次数
                clearInterval(timer); // 清除定时器
                return; // 跳出函数
            }
            x++; // 当前次数自增
            window.scrollTo(0, currentTop + step * x) // 滚动到当前次数该到的位置
         }, t);

缓动

顾名思义，就是缓缓移动，让动画不那么生硬，就像 CSS 动画那样，可以设置不同的速度曲线，看起来有不同的线性效果。

• 如果自己计算缓动函数（缓动函数速查表）难度比较高，所以借助现有的成熟库更方便，例如 tween.js，示例代码如下：

  function animate(time) { // 设置动画循环时间
      requestAnimationFrame(animate);
      TWEEN.update(time);
  }
  requestAnimationFrame(animate);
  
  var coords = { x: 0, y: 0 }; // 起始坐标数据
  var tween = new TWEEN.Tween(coords) // 创建新实例并将坐标数据传入
      .to({ x: 300, y: 200 }, 1000) // 在1秒钟内移动到指定坐标
      .easing(TWEEN.Easing.Quadratic.Out) // 设置指定的缓动方式
      .onUpdate(function() { // 此函数会在Tween每次将坐标数据更新后调用
          // 在函数内部就可以使用坐标数据来完成动画
      })
      .start(); // 立即启动实例

• 要学会在不懂的情况下搞定遇到的问题。

菜单高亮

通过在页面滚动时，计算不同区块相对顶部高度与当前页面滚动高度的差值，找到最小差值相对应的区块，让锚链接这个区块的菜单改变样式即可；由于差值可能是负数，比较时要先将差值全部取绝对值，可以使用内置数学对象的 Math.abs() 方法。

小结

还有一些其他动画效果，都很简单，就不一一赘述了；使用 JavaScript 操作 DOM 节点其实很简单，就是触发事件，然后找到相应节点，然后对其添加或删除类名，或者改变节点的其他属性，最终完成一个效果。