CSS Spritesheet 移动过渡。无需在背景图像中滑动即可轻松答案

【问题标题】：CSS Spritesheet movement transition. Ease without sliding through the background imageCSS Spritesheet 移动过渡。无需在背景图像中滑动即可轻松
【发布时间】：2016-12-30 09:11:05
【问题描述】：

这有点难以解释，因为它是拗口的，但我会尽我所能为您提供上下文。

我有一个小角色，在 CSS 精灵表上面向北、南、东和西。在我的游戏中。你可以用 WASD 控制他的动作，使他明显地向上、向下、向左或向右移动 X 个像素。根据该方向，CSS sprite 会相应更改以适应，因此他始终“面向”他行进的方向。

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

我的问题是，什么 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 和在线上的所有内容都只讨论动画或悬停效果，不适用于我的具体问题。

【问题讨论】：

不清楚你在问什么。 “什么 CSS 属性控制屏幕上的像素移动” – 我只看到您通过 left 属性移动播放器对象，但这与背景图像几乎没有关系。您可以转换 CSS 属性的更改，也可以不转换。如果您转换背景位置，那么您看到的效果是可以预期的。如果您不想要它，则不要转换该属性，而是具体说明您确实想要转换的需求。
在这种情况下使用steps()。
CBroe，我想在不转换背景图像的情况下转换播放器对象的移动。我想知道除了过渡中的通用“全部”之外，是什么决定了这一点。
Scott Kaye，我查看了步骤，但我没有播放动画，只有 4 帧根据方向变化，没有动画。我不知道如何执行步骤，但要保持运动的轻松过渡。
玩家的移动肯定是在屏幕上的垂直水平position上传递的..对吗？在我看来，您想要动画/过渡...根本不是图像。

标签： javascript css css-transitions transition css-sprites

【解决方案1】：

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

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

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

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

或者，您可能对 spritesheet 的设置方式有疑问。确保每个“精灵区域”（即，可能一次可见的工作表的每个部分）都有精灵在其中居中，而不是靠在任何边缘。（如果您想要更详细的答案，制作一个代码笔可能会有所帮助，以显示您所拥有的内容。）

【讨论】：

我的代码已经在顺利过渡。但如果您更改移动方向，它也会闪烁，因为它会移动到新的背景位置。我希望它平滑过渡，而不会出现 CSS 精灵更改闪烁。
另外，48px 的移动正在将玩家转移到网格的另一块瓷砖上，所以它必须是那个距离，而且我认为当它突然移动时它看起来太尖锐和僵硬而没有过渡，但是当我进行 CSS 过渡时我遇到了问题
是的，非常感谢，这就是我想要的！抱歉，如果一开始不清楚，但很高兴现在可以使用。（它也确实有效果，你上面的代码进行了移动转换，即使我的 JS 设置了样式）