Question

我有一个装满图片的文件夹。每张图片都是按顺序运行的马。我想通过顺序快速地显示图像来向用户提供马正在运行的典故。

任何人都可以建议一个好的图书馆或方法来实现上述目标

Answer 1

我知道你问过这个问题并将其标记为javascript和jquery，但是因为你问的是最好的方法是什么：

最好的方法是将图像制作成精灵表（即一个组合图像），并在元素上使用适当的背景位置。通过逐步使用CSS3动画，您可以更改背景位置，从而产生图像移动的错觉。

因此，请勿使用 n 数量的图像，使用合并所有帧的单个图像。

假设每帧为100x100像素，并且您有10帧。那会给你一张100 * 1000像素的精灵表。将此图像设置为元素的背景：

.running-horse {
  width: 100px;
  height: 100px;
  background: url(sprite.jpg) top left;

  animation: runningHorse 1s steps(10) infinite;
}

@keyframes runningHorse {
  to {
    background-position: -1000px;
  }
}

动画属性中的

steps(10)是跳转到下一个图像的原因，而不是滑动精灵表。

详细了解step based CSS3 animation

让马看起来像是在运行--JQuery

1 个答案: