js实现类似jquery里animate动画效果的方法

时间：2023-12-09

实现类似jQuery里的animate动画效果的方法，可以通过纯JavaScript使用定时器setInterval()来实现。

1. 编写animate函数

在JavaScript中，编写一个animate函数，接收四个参数：元素对象、目标属性、动画时长和回调函数。动画时长使用毫秒作为单位，回调函数在动画完成时执行。

/**
 * 实现 animate 动画方法
 * @param {Object} element 要执行动画的元素对象
 * @param {Object} targetObj 目标样式属性对象
 * @param {Number} duration 动画完成时长，单位ms
 * @param {Function} callback 动画结束后的回调函数
 */
function animate(element, targetObj, duration, callback) {
  // 获取元素当前样式
  var currentStyleObj = getCurrentStyleObj(element);

  // 创建定时器对象
  var intervalId = setInterval(function () {
    // 计算每帧变化的值，并更新元素样式
    for (var property in targetObj) {
      var startValue = parseFloat(currentStyleObj[property]);
      var targetValue = parseFloat(targetObj[property]);
      var change = targetValue - startValue;
      var elapsed = Date.now() - startTime;
      var progress = elapsed / duration;
      var val = startValue + change * progress;
      element.style[property] = val + (property === 'opacity' ? '' : 'px');
    }

    // 判断动画是否结束，结束后清除定时器并执行回调函数
    if (elapsed >= duration) {
      clearInterval(intervalId);
      element.style[property] = targetValue + (property === 'opacity' ? '' : 'px');
      callback && callback();
    }
  }, 1000 / 60);

  // 获取元素当前样式的函数
  function getCurrentStyleObj(element) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(element);
    } else {
      return element.currentStyle;
    }
  }

  // 记录动画开始时间
  var startTime = Date.now();
}

2. 示例说明

示例1：移动元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Animate Demo</title>

  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>

  <div id="box"></div>

  <script>
    var box = document.getElementById('box');

    // 移动到100px, 200px
    animate(box, { left: 100, top: 200 }, 1000, function () {
      console.log('Animation complete');
    });
  </script>

</body>

</html>

示例2：调整元素透明度

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Animate Demo</title>

  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 1;
    }
  </style>
</head>

<body>

  <div id="box"></div>

  <script>
    var box = document.getElementById('box');

    // 透明度从1变为0
    animate(box, { opacity: 0 }, 1000, function () {
      console.log('Animation complete');
    });
  </script>

</body>

</html>

上一篇：javascript 事件加载与预加载 下一篇：javascript判断css3动画结束 css3动画结束的回调函数

js实现类似jquery里animate动画效果的方法

1. 编写animate函数

2. 示例说明

示例1：移动元素

示例2：调整元素透明度

相关文章