用js写一个动画封装函数

### 回答1：

我可以给你一个简单的示例：function animate(element, animationName) {
element.classList.add('animated', animationName); const handleAnimationEnd = () => {
element.classList.remove('animated', animationName);
element.removeEventListener('animationend', handleAnimationEnd);
} element.addEventListener('animationend', handleAnimationEnd);
}

### 回答2：
动画封装函数是为了简化JavaScript中创建和控制动画的过程，并提高代码的可重用性。下面是一个简单的动画封装函数的示例：

function animate(element, property, targetValue, duration) {
  let initialValue = parseInt(getComputedStyle(element)[property])
  let distance = targetValue - initialValue
  let startTime = null

  function animation(timestamp) {
    if (startTime === null) startTime = timestamp
    let progress = timestamp - startTime
    let currentValue = initialValue + (distance * progress) / duration

    element.style[property] = currentValue + 'px'

    if (progress < duration) {
      requestAnimationFrame(animation)
    }
  }

  requestAnimationFrame(animation)
}

这个函数接受四个参数：`element`代表要执行动画的元素，`property`代表要动画化的属性，`targetValue`代表属性的目标值，`duration`代表动画持续的时间（以毫秒为单位）。

函数中先获取元素当前属性的初始值和与目标值的差距。然后通过`requestAnimationFrame`方法来不断更新属性的值，并根据当前时间戳和开始时间计算动画进度。最后，判断动画是否已完成，如果没完成则再次请求更新。

要使用该函数，只需在HTML中引入对应的JavaScript文件，然后在其他函数或事件中调用该函数即可。例如：

let box = document.getElementById('box')
animate(box, 'left', 200, 1000)

这段代码会使id为`box`的元素向左移动200像素，持续1秒。

### 回答3：
动画封装函数可以利用 JavaScript 的动画功能来创建各种动态效果。以下是一个示例：

function animate(element, property, targetValue, duration) {
  let startValue = parseFloat(getComputedStyle(element)[property]);
  let time = 0;

  function updateAnimation() {
    time += 16; // 每秒大约 60 次刷新

    if (time >= duration) {
      element.style[property] = targetValue;
      return;
    }

    let progress = time / duration;
    let currentValue = startValue + (targetValue - startValue) * progress;

    element.style[property] = currentValue + 'px';

    requestAnimationFrame(updateAnimation);
  }

  requestAnimationFrame(updateAnimation);
}

这个 `animate` 函数可以通过传入不同的参数来实现不同的动画效果。它接受四个参数：

1. `element`：要应用动画的元素。
2. `property`：要改变的 CSS 属性，比如 `'left'`、`'top'`、`'opacity'` 等。
3. `targetValue`：改变后的目标值，可以是像素值、透明度等。
4. `duration`：动画的持续时间，以毫秒为单位。

例如，要将一个元素的左侧位置从原来的 0px 平滑地移动到 100px，可以使用以下代码：

let myElement = document.getElementById('myElement');
animate(myElement, 'left', '100px', 1000);

这样，`myElement` 元素在 1 秒钟内就会平滑地从初始位置移动到 100px 的位置。

希望这个简单的动画封装函数能帮助到你！