Перемещение движения CSS Spritesheet. Простота без скольжения по фоновому изображению

Question

Это сложно объяснить, потому что это глоток, но я постараюсь дать вам контекст как можно лучше.

У меня есть маленький персонаж, выходящий на север, юг, восток и запад, на лист спрайтов CSS. В моей игре. вы можете контролировать его движения с помощью WASD, заставляя его заметно перемещать X количество пикселей вверх, вниз, влево или вправо. В зависимости от этого направления CSS-спрайт изменяется так, чтобы он соответствовал тому, чтобы он всегда «смотрел» на направление, в котором он путешествует.

Моя проблема заключается в том, что я хочу использовать свойство перехода 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 и в режиме онлайн говорят только о анимационных или зависающих эффектах и ​​не относятся к моей конкретной проблеме.

Answer 1

Причина, по которой вы не видите плавного перехода в движении, заключается в том, что ваш JS перемещает символ с шагом в 48 пикселей. Когда вы устанавливаете такой стиль непосредственно в JS, вы не увидите его оживляющим, потому что он сразу же устанавливает его в новое значение - даже если вы на нем наложили свойство transition.

Edit: Если вы хотите перейти на позицию, а не фон-позиции, вы могли бы сделать это следующим образом:

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

Тем не менее, он все равно не будет иметь эффект если вы используете JS для установки стиля. Когда вы установите style.left += 48px, он будет перемещать 48px за один раз.

Кроме того, у вас может возникнуть проблема с настройкой вашего спрайта. Убедитесь, что каждая «область спрайта» (т. Е. Каждый сегмент листа, который может быть виден сразу) имеет спрайт с центром в нем, а не с любым из краев. (Может быть полезно сделать код, показывающий, что у вас есть, если вы хотите получить более подробные ответы.)