原生JS封装animate运动框架的实例

当我们需要进行网页中的动画操作，很多时候会涉及到DOM元素的运动，比如移动、旋转、透明度变化等等。这时候，JavaScript的animate函数封装可以帮助我们更加方便地实现动画效果。

以下是原生JS封装animate运动框架的实例的完整攻略：

1. 利用JavaScript封装animate运动框架

我们首先需要使用JavaScript来封装animate运动框架，这里我们可以通过自定义一个Animate类来实现。具体代码如下：

class Animate {
  constructor(dom, options) {
    this.dom = dom; // 需要运动的DOM元素
    this.startTime = 0; // 动画开始时间
    this.startPos = 0; // 动画开始时的位置
    this.endPos = 0; // 动画结束时的位置
    this.duration = options.duration || 1000; // 动画持续时间，默认为1000ms
    this.easing = options.easing || 'linear'; // 缓动函数，默认为线性匀速
    this.callback = options.callback || function(){}; // 动画结束回调函数
  }

  // 缓动函数支持linear、ease-in、ease-out、ease-in-out等
  // 具体实现可以参考页面：http://easings.net/zh-cn
  // 以ease-in-out为例，对应的缓动函数表达式为：
  // t: current time, b: beginning value, c: change in value, d: duration
  // if ((t/=d/2) < 1) return c/2*t*t + b;
  // return -c/2 * ((--t)*(t-2) - 1) + b;
  easingSupport() {
    let easings = {
      linear(t, b, c, d) {
        return c*t/d + b;
      },
      easeInQuad(t, b, c, d) {
        return c*(t/=d)*t + b;
      },
      easeOutQuad(t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
      },
      easeInOutQuad(t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
      }
    };
    if (!easings[this.easing]) {
      return easings['linear']; // 默认为线性匀速
    }
    return easings[this.easing];
  }

  // 开始动画
  start(endPos) {
    this.startTime = new Date().getTime();
    this.startPos = this.dom.getBoundingClientRect().left;
    this.endPos = endPos;

    let requestId;
    let update = () => {
      requestId = requestAnimationFrame(update);

      let currentPos = Math.min(this.endPos, this.startPos + (new Date().getTime() - this.startTime) / this.duration * (this.endPos - this.startPos));
      this.dom.style.transform = `translateX(${currentPos}px)`;

      if (currentPos === this.endPos) {
        cancelAnimationFrame(requestId);
        this.callback();
      }
    };

    requestId = requestAnimationFrame(update);
  }
}

以上的Animate类封装了一些常用的动画参数，包括动画运动开始时间、开始位置、结束位置、持续时间、缓动函数以及动画结束回调函数。缓动函数可以支持线性匀速以及在easings.net上面找到的其他常用缓动函数。

在start方法的实现过程中，我们使用了requestAnimationFrame方法，该方法可以在浏览器下一帧时间执行动画更新函数，避免了频繁重绘对性能的影响。

2. 使用封装的animate函数实现动画效果

在完成animate函数的封装之后，我们可以在项目中使用这个函数来实现动画效果。以下是两个动画示例的具体实现过程。

示例1：元素移动动画

在这个例子中，我们需要实现一个标题的移动动画效果，这个标题默认位于容器左侧，当鼠标移动到该容器时，标题应该从左侧缓慢划出。代码实现如下：

<style>
  .container {
    position: relative;
    height: 80px;
    overflow: hidden;
    border: 1px solid #ccc;
  }
  .title {
    position: absolute;
    left: -100px; // 初始位置在容器外部
    top: 0;
    width: 100px;
  }
</style>
<div class="container">
  <div class="title">动画标题</div>
  <div class="content">
    容器内容部分
  </div>
</div>
<script>
  let title = document.querySelector('.title');
  let container = document.querySelector('.container');
  container.addEventListener('mouseenter', ()=>{
    let animate = new Animate(title, {
      duration: 1000, // 持续时间为1s
      easing: 'easeInOutQuad', // 使用easeInOutQuad缓动函数
      callback: ()=>{
        console.log('动画结束了');
      }
    });
    animate.start(0);  // 移动到x=0的位置，即容器内部
  });
</script>

在这个例子中，我们首先需要通过CSS将标题设置为绝对定位，位于容器的左侧，初始位置为容器外部。当鼠标移动到容器上时，我们通过创建一个Animate实例来实现标题的运动效果，将标题从左侧缓慢移动到容器内部。

示例2：元素透明度变化动画

在这个例子中，我们需要实现一个图片的透明度变化动画效果。当鼠标移动到图片上时，图片的透明度应该从1变化到0，即完全消失。代码实现如下：

<style>
  .container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #ccc
  }
  img {
    width: 100%;
    height: 100%;
    opacity: 1; // 初始透明度为1
    transition: opacity 0.5s; // 使用CSS过渡
  }
</style>
<div class="container">
  <img src="example.jpg">
</div>
<script>
  let img = document.querySelector('img');
  img.addEventListener('mouseenter', ()=>{
    let animate = new Animate(img, {
      duration: 500, // 持续时间为0.5s
      easing: 'easeInOutQuad', // 使用easeInOutQuad缓动函数
      callback: ()=>{
        console.log('动画结束了');
      }
    });
    animate.start(0); // 转变为完全透明
  });
</script>

在这个例子中，我们首先需要通过CSS将图片的初始透明度设置为1，并使用CSS过渡使得透明度变化更加平滑。当鼠标移动到图片上时，我们通过创建一个Animate实例来实现图片的透明度变化效果，将透明度从1过渡到0，即完全消失。