Question

我有一个不同角度的物体图像序列。我希望当用户拖动它的鼠标时，该对象将被旋转，这是我实现的。

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

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

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

Answer 1

为了使动画尽可能平滑，你应该使用一个CSS精灵，一个包含所有其他图像的图像，这样在动画开始时都会加载帧。

然后，您只需要在给定时间内调用一个函数，具体取决于您想要动画的平滑程度，并更改图像的背景属性。或者，如果不使用精灵，请为其指定不同的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.

}

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

使用JavaScript动画图像序列

1 个答案: