CSS Spritesheet移动过渡。在不滑动背景图像的情况下轻松

Question

这有点难以解释，因为它是一口，但我会尽量给你的背景最好。

我有一个小角色，面向北，南，东，西，在CSS精灵页上。在我的游戏里。你可以用WASD控制他的动作，使他明显地向上、向下、左边或右边移动X个像素。根据这个方向，CSS精灵会进行相应的更改，以便他总是“面对”他正在旅行的方向。

我的问题是我想要使用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 is增量移动字符。当您在JS中直接设置这样的样式时，您将不会看到它的动画，因为它会立即将其设置为新值--即使您在其上放置了transition属性。

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

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

尽管如此，如果您使用JS来设置样式，它仍然不会有效果。当您设置style.left += 48px时，它将将48 go全部移动一次。

或者，您可能对如何设置spritesheet有问题。确保每个“精灵区域”(即，每块可能同时可见的工作表)都以精灵为中心，而不是针对任何边缘。(如果你想要更详细的答案的话，做一个代码熟练的展示你得到的可能是有帮助的。)