javascript - 使用 JavaScript 动画图像序列

Question

我有一个包含不同角度对象图像的序列。我希望当用户拖动鼠标时对象被假旋转，我已经实现了这一点。

但我想要的是，当鼠标离开图像区域时，它会将图像序列动画化回默认位置。

例如，我有 30 个 JPEG，其中 1.jpg 是 -180°，而 30.jpg 是 180°。自然地，15.jpg 是 0° 处居中的默认图像。

因此，如果用户一直旋转到 (-)180°，它将在 3 秒后旋转回 0°。但我希望动画尽可能流畅。我该怎么做呢？

Answer 1

为了使动画尽可能流畅，您应该使用 CSS sprite，一个包含所有其他图像的图像，以便在动画开始时加载所有帧。

然后你只需要在给定的时间内调用一个函数，根据你想要的动画有多平滑，并改变你的图像的背景属性。或者，如果不使用 sprite，则为其分配不同的 src。

我认为您应该选择不小于 25 的帧/秒值。更高的帧速率意味着更流畅的动画，但使用的 CPU 更多。

这是基本方法

function next_frame() {

  frame += 1;

  // start animation again from the start if last frame reached (optional)
  if ( frame == max_frames ) {
    frame = 0;
  }

  /* change either the class of your image (if you use sprites
     and specified a class for each background position) or the
     background position property directly. If not using sprites,
     assign a different image src based on current frame.
  */

  // call the function again
  setTimeout( next_frame, 1000 / 25 ); // change 25 with your desired FPS value.

}

如果您希望图像返回动画，您只需要应用相同的方法，但帧号向后移动。