CSS Spritesheet 运动过渡。无需滑动背景图像即可轻松

Question

有点难以解释，因为它很啰嗦，但我会尽力为您提供上下文。

我有一个小角色，在CSS 精灵sheet 上面向东西南北。在我的游戏中。您可以使用 WASD 控制他的动作，使他明显向上、向下、向左或向右移动 X 个像素。根据那个方向，CSS 精灵会相应地改变以适应，因此他总是 "facing" 他行进的方向。

我的问题是我想使用 CSS 转换属性，但是当我这样做时，它会导致我想要的移动，但是它会滚动 CSS 精灵，我不想要。

我的问题是，什么 CSS 属性控制屏幕上的像素移动，因为将它设置为 "All" 会转换所有内容，包括我不想要的背景位置。

我有以下 CSS 代码：

.player {
    background: url(character.png) no-repeat top left;
    width: 48px;
    height: 48px;
    position: absolute;
    margin: 0;
    z-index: 100;
    transition: all .25s ease;
}

.player.playerFront {
    background-position: 0 0;
}

.player.playerBack {
    background-position: -48px 0;
}

.player.playerLeft {
    background-position: -96px 0;
}

.player.playerRight {
    background-position: -144px 0;
}

Javascript:

player.className = 'player playerRight';
player.style.left = parseInt(player.style.left) + 48 + 'px'; // Example of the JS when the player moves right

我尝试了多种可能性...none 其中一些可行。 Whosebug 和网上的所有内容都只讨论动画或悬停效果，并不适用于我的具体问题。

Answer 1

您看不到运动平滑过渡的原因是您的 JS 以 48px 的增量移动角色。当你直接在 JS 中设置这样的样式时，你不会看到它是动画的，因为它会立即将它设置为新值 - 即使你在其上放置 transition 属性。

编辑： 如果你只想转换位置而不是背景位置，你可以这样做：

transition-property: top, bottom, left, right; 
transition-duration: 0.25s; 
transition-timing-function: ease;

也就是说，如果你是用JS设置样式，还是没有效果。当您设置 style.left += 48px 时，它将一次性移动 48px。

或者，您可能对 spritesheet 的设置方式有疑问。确保每个 "sprite area"（即可能同时可见的 sheet 的每个部分）都将 sprite 居中，而不是靠在任何边缘上。（如果您想要更详细的答案，制作一个代码笔来显示您所获得的内容可能会有所帮助。）

CSS Spritesheet 运动过渡。无需滑动背景图像即可轻松

CSS Spritesheet movement transition. Ease without sliding through the background image

javascript

css

transition

css-sprites

css-transitions