当前位置：文江博客话题详情

使用 JavaScript 制作图像序列动画

发布于 2024-12-04 06:02:18 字数 237 浏览 0 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半寸时光 2024-12-11 06:02:18

为了使动画尽可能流畅，您应该使用 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.

}

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

For the animation to be as smooth as possible, you should use a CSS sprite, an image containing all your other images, so the frames will all be loaded when the animation start.

Then you only need to call a function in a given amount of time, based on how smooth you want the animation to be, and change the background property of your image. Or, if not using sprite, assign a different src to it.

I think you should choose a frame-per-second value of no less than 25. Higher frame rate means more smooth animation, but more CPU used.

This is the basic approach

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.

}

If you want the image to animate back, you just need to apply the same approach but with the frame numbers going backwards.

回复收藏 0 原文

~没有更多了~