JavaScript动画函数封装详解

在网页开发中，我们经常需要运用动画效果来增强页面的交互性和美观度。JavaScript作为前端开发的重要组成部分，也提供了多种方式来实现动画效果。本篇文章将详细讲解如何封装JavaScript动画函数，让动画开发变得更加高效便捷。

为什么要封装JavaScript动画函数

在开发过程中，我们会遇到多个地方需要实现相似的动画效果，例如：淡入淡出、滑动、旋转等，如果每个地方都写一大段重复的代码来实现同样的动画效果，不仅冗余而且浪费时间。此时，封装动画函数是一个非常好的选择。可以将通用的动画效果封装为一个函数，来复用实现相似的动画需求。

动画函数封装的基本逻辑

一个动画函数至少需要以下三个参数：

开始时间（startTime）：动画开始的时间，通常使用Date.now()获取当前时间戳。
持续时间（duration）：动画的持续时间，单位为毫秒。
回调函数（callback）：动画结束后需要执行的操作，通常是更新页面元素的状态或者触发其他事件。

在动画函数内部，需要实现以下逻辑：

获取当前时间，计算动画已经持续的时间，计算动画进程（progress）。
根据动画进程和动画类型，计算元素的最新状态（位置、透明度、缩放比例等）。
更新元素的状态。
判断动画是否结束，如果未结束则继续执行。

以下是一个基本的动画函数封装范例，实现了元素的淡入效果：

function fadeIn(element, duration, callback) {
  const startTime = Date.now();
  element.style.opacity = '0';

  function animate() {
    const currentTime = Date.now();
    const progress = (currentTime - startTime) / duration;

    if (progress > 1) {
      element.style.opacity = '1';
      callback && callback();
    } else {
      element.style.opacity = progress;
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

代码解释：

首先，我们定义了一个函数 fadeIn，其中一个元素作为第一个参数传递，duration 是动画的持续时间，callback 是动画完成后需要执行的代码块。

然后，我们获取当前时间并将动画元素的不透明度设置为 0。

接下来，我们定义了一个名为 animate 的内部函数。在函数内部，我们获取动画当前的时间，并计算了进程。计算方法是用当前时间减去起始时间，除以动画时长。

在 else 代码块中，我们将元素的不透明度设置为进程值。如果动画进程小于 1，则使用 requestAnimationFrame 函数每次更新动画。

最后，在 if 代码块中，我们将元素的不透明度设置为 1，动画结束后执行回调函数。

实例1：元素的滑动效果

首先，我们需要确保元素需要有 position: absolute 或 position: relative 样式属性。然后我们封装一个 slide 函数，如下所示：

function slide(element, duration, distance, direction, callback) {
  const startTime = Date.now();
  const startPosition = element.style[direction] || '0px';
  const endPosition = parseInt(startPosition) + distance + 'px';

  function animate() {
    const currentTime = Date.now();
    const progress = (currentTime - startTime) / duration;

    if (progress > 1) {
      element.style[direction] = endPosition;
      callback && callback();
    } else {
      const currentPosition = parseInt(startPosition) + (distance * progress);
      element.style[direction] = currentPosition + 'px';
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

我们可以在元素内部调用该函数，例如滑动元素向右侧移动 200px：

<button onclick="slide(box, 1000, 200, 'left')">Slide Right</button>

其中，box 是 HTML 页面中的一个元素，1000 是动画时长，200 是移动的距离，left 表示移动方向为左侧。

实例2：元素的旋转效果

下面是一个可以轻松实现元素旋转效果的函数。你可以将这个函数封装到你的代码库中以重复使用。

function rotate(element, duration, angle, direction, callback) {
  const startTime = Date.now();
  const startAngle = element.style[direction] || '0deg';
  const endAngle = parseInt(startAngle) + angle + 'deg';

  function animate() {
    const currentTime = Date.now();
    const progress = (currentTime - startTime) / duration;

    if (progress > 1) {
      element.style[direction] = endAngle;
      callback && callback();
    } else {
      const currentAngle = parseInt(startAngle) + (angle * progress);
      element.style[direction] = currentAngle + 'deg';
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

我们可以在元素内部调用该函数，例如 3D 立方体动画：

<div class="cube">
  <div id="front"></div>
  <div id="back"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="top"></div>
  <div id="bottom"></div>
</div>

<script>
  // 旋转立方体
  const cube = document.querySelector('.cube');

  for (let i = 0; i < 6; i++) {
    const side = document.querySelectorAll('.cube div')[i];
    let angle;
    let direction;
    if (i === 0) {
      angle = 0;
      direction = 'rotateY';
    } else if (i === 1) {
      angle = 180;
      direction = 'rotateY';
    } else if (i === 2) {
      angle = 90;
      direction = 'rotateY';
    } else if (i === 3) {
      angle = -90;
      direction = 'rotateY';
    } else if (i === 4) {
      angle = 90;
      direction = 'rotateX';
    } else if (i === 5) {
      angle = -90;
      direction = 'rotateX';
    }

    setTimeout(() => {
      rotate(side, 2000, angle, direction);
    }, 1000 * i);
  }
</script>

在代码中我们可以看到，选择了旋转内部的方块。我们将每个方块赋予不同的旋转方向（rotateY 或 rotateX）和角度值，并设置延迟来使方块一个接一个地出现。每个方块旋转动画的变化都采用了这个封装的函数。