用JavaScript制作图像序列动画

我有一个序列，从不同角度拍摄一个物体的图像。我希望当用户拖动鼠标时，对象被人造旋转，我已经实现了这一点

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

例如，我有30个JPEG，其中1.jpg是-180°，30.jpg是180°。当然，15.jpg是以0°为中心的默认图像

---

因此，如果用户一直旋转到（-）180°，它将在3秒钟后旋转回0°。但我希望动画尽可能平滑。我将如何执行此操作？

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

然后，您只需要在给定的时间内调用函数，这取决于您希望动画的平滑程度，并更改图像的背景属性。或者，如果不使用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.

}

---

如果您想让图像恢复动画效果，只需采用相同的方法，但帧数要向后。

显示您已有的代码是一个很好的开始-最好是在站点或jsFiddle.net上