原生js仿jquery animate动画效果

下面是原生JS仿jQuery animate动画效果的完整攻略：

1. 原理介绍

要实现原生JS仿jQuery animate动画效果，需要了解以下知识点：

1. window.requestAnimationFrame(callback)：该方法会在浏览器下一次重绘之前执行指定的回调函数。通过使用该方法，可以让动画更加流畅，避免使用setTimeout时出现卡顿。
2. CSS3的transition属性：该属性可以为元素添加动画效果。可以设置变化之间的时间、速度曲线、延迟等等。
3. CSS3的transform属性：该属性可以使用各种转换函数（如平移、旋转、缩放等）对元素进行变换。

通过使用window.requestAnimationFrame以及CSS3的transition和transform属性，可以实现原生JS仿jQuery animate动画效果。

2. 代码实现

• 示例1：沿Y轴移动

下面是一个简单的示例，展示如何通过原生JS实现一个元素沿Y轴移动的动画效果。

HTML代码如下：

<div class="box"></div>

CSS代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

JS代码如下：

function animateY(el, distance, duration) {
  var start = performance.now();
  var translateY = el.offsetTop;

  function step(timestamp) {
    var progress = (timestamp - start) / duration;
    progress = Math.min(progress, 1);

    var newY = translateY + distance * progress;
    el.style.transform = `translateY(${newY}px)`;

    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
}

var box = document.querySelector('.box');
animateY(box, 100, 1000);

上面的代码中，animateY函数接受3个参数：元素节点 el，沿Y轴移动的距离 distance 和动画时间 duration。在函数中，我们使用performance.now()获取动画开始的时间戳，然后在step函数中，计算动画当前的进度，根据进度计算新的位置，并通过transform属性为元素设置新的位置。当进度小于1时，我们继续使用window.requestAnimationFrame来更新元素位置，直到动画结束。

需要注意的是，这里使用的是performance.now()方法获取时间戳，而不是Date.now()方法。performance.now()方法的精度更高，能够更好地保证动画的流畅性和准确性。

• 示例2：根据窗口滚动位置改变元素透明度

下面这个示例展示了如何实现一个元素根据窗口滚动位置的变化而改变透明度的动画效果。

HTML代码如下：

<div class="box"></div>

CSS代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

JS代码如下：

function animateOpacity(el) {
  var start = el.getBoundingClientRect().top - window.innerHeight;
  var end = el.getBoundingClientRect().top;
  var range = end - start;

  function updateOpacity() {
    var scrollTop = window.pageYOffset;
    var progress = (scrollTop - start) / range;
    progress = Math.min(progress, 1);

    el.style.opacity = progress;
  }

  window.addEventListener('scroll', updateOpacity);
}

var box = document.querySelector('.box');
animateOpacity(box);

上面的代码中，animateOpacity函数接受一个参数：元素节点 el。首先，我们通过getBoundingClientRect()方法获取元素相对于视口的高度，计算出元素出现的滚动距离范围。然后，我们通过window.addEventListener('scroll', updateOpacity)来监听窗口滚动事件，计算当前滚动位置的进度并更新元素的透明度。由于透明度的改变是通过CSS的transition属性来控制的，因此可以保证动画效果的流畅性。

3. 注意事项

• 由于window.requestAnimationFrame方法的兼容性较差，为了保证在所有浏览器中都能正常运行，可以考虑使用一个polyfill来实现。
• 要注意动画效果的性能问题。如果动画过于复杂或在数据量过大的情况下进行动画操作，可能会导致浏览器卡顿或崩溃。因此，在实现动画的过程中，可以考虑使用一些优化手段，如减少使用position: fixed或position: absolute，合理使用CSS3属性等等。