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

Question

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

我在 CSS Sprite 表上有一个面向北、南、东和西的小 Angular 色。在我的游戏中。您可以使用 WASD 控制他的 Action ，使他明显向上、向下、向左或向右移动 X 个像素。根据该方向，CSS Sprite 会发生相应变化以适应，因此他始终“面向”他行进的方向。

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

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

我有以下 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

我已经尝试了多种可能性……但都没有奏效。 StackOverflow 和网上的所有内容都只谈论动画或悬停效果，并不适用于我的具体问题。

Answer 1

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

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

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

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

或者，您可能对 spritesheet 的设置方式有疑问。确保每个“sprite 区域”(即，可能同时可见的工作表的每个部分)都将 sprite 居中，而不是靠在任何边缘上。 (如果您想要更详细的答案，制作一个 codepen 可能会有所帮助。)