CSSスプライトシートの動きの遷移。

Question

それは一口だから説明するのはいくらか難しいですが、私はできる限り文脈を伝えようとします。

CSSスプライトシートに、北、南、東、西に面した小さな文字があります。私のゲームで。 WASDで彼の動きをコントロールすることができます。これにより、Xピクセルを視覚的に上下、左右、または右に移動させることができます。その方向に応じて、CSSのスプライトはそれに応じて変更され、移動する方向に常に「向き」ます。

私の問題は、CSSトランジションプロパティを使用したいのですが、そうしたときに動きが発生しますが、CSSスプライトをスクロールしてしまいます。

私の質問は、「すべて」に設定すると、必要のないバックグラウンドの位置を含め、すべてが遷移するため、画面上のピクセルの動きを制御するCSSのプロパティです。

私は、次のCSSコードを持っている：私が働いているいずれも可能性...の様々な試みた

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

：

.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を。 StackOverflowとオンライン上のすべてのものは、アニメーションやホバー効果についてのみ話し、私の特定の問題には当てはまりません。

Answer 1

動きがスムーズに表示されない理由は、JSが48ピクセル単位で文字を移動しているためです。 JSのようなスタイルを直接設定すると、transitionプロパティを設定しても、新しい値にすぐに設定されるため、アニメーション化されません。

編集： あなたが唯一の位置ではなく、バックグラウンドポジションを移行したい場合、あなたはこのようにそれを行うだろう：

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

それはまだ効果はありません、と述べましたスタイルを設定するためにJSを使用している場合。 style.left += 48pxと設定すると、その48pxがすべて1つに移動します。

また、スプライトシートの設定方法に問題がある可能性があります。それぞれの「スプライト領域」（つまり、一度に表示される可能性のあるシートの各セグメント）には、スプライトが中央に配置され、エッジのいずれにも配置されないようにしてください。 （詳細な回答が必要な場合は、入手したものを示すコードを作成すると役に立ちます）