前端面试题 - 76. 要实现一个js的持续动画，你有什么比较好的方法？

常见的方法

1. 使用setInterval()函数：这个函数可以在一定的时间间隔内执行指定的代码。你可以在每次执行时改变元素的位置或样式来创建动画效果。但是，使用setInterval()可能会导致卡顿和性能问题，因为它在每次执行时都要进行重绘。
2. 使用requestAnimationFrame()函数：这个函数可以让你在浏览器重绘之前执行指定的代码。这样做可以避免卡顿和性能问题，并且会自动调整帧速率以适应浏览器的性能。你可以在每次执行时改变元素的位置或样式来创建动画效果。
3. 使用CSS动画：使用CSS动画可以让浏览器更好地处理动画效果，并且会自动调整帧速率以适应浏览器的性能。你可以使用@keyframes规则来定义动画序列，并将其应用于元素，然后使用JavaScript来控制动画的开始和结束。

举例

首先是使用requestAnimationFrame()函数：

function animate() {
  // 更新元素位置或样式
  // ...

  // 在下一帧执行动画
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

在上述代码中，我们定义了一个animate()函数，它会在每一帧执行指定的代码。在函数内部，你可以更新元素的位置或样式，以创建动画效果。然后，在每一帧结束时，我们使用requestAnimationFrame()函数来再次调用animate()函数，以便在下一帧继续执行动画。

接下来是使用CSS动画：

@keyframes my-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  animation-name: my-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

在上述代码中，我们定义了一个名为my-animation的关键帧动画序列，它会将元素从初始位置平移100像素。然后，我们将这个动画序列应用于一个具有.element类的元素上，并设置了动画的持续时间和重复次数，使其无限循环。

需要注意的是，如果你想使用JavaScript来控制动画的开始和结束，可以使用animation-play-state属性来暂停和恢复动画，或使用animation-fill-mode属性来将元素保持在动画结束状态。