シンプルなスプライトアニメーション

9603 ワード
html animation sprite css テキストリンク
HTMLとCSS以外の単純なスプライトアニメーションを作成するには、スプライトのスプライトシートを使用してアニメーションを作成する必要があります.のいずれか無料または有料のスプライトシート、または独自の作成のためのリソースをオンラインで見つけることができます.Piskelapp は、ピクセルアートの複数のフレームを作成し、単一のスプライトシートとしてインポートすることができます便利なウェブサイトです.
デモ目的のために私はPixelAppを使用して簡単な文字の歩行アニメーションを作成し、4 x 1のフレームにインポートします.(ひどいピクセルアートを判断しないでください、私はプログラマではなく、アーティストであるために勉強している!)

この静的スプライトシートをこのアニメーションのスプライトにするには、CSSのいくつかのトリッキーな行が必要です.

HTML


開始するにはいくつかのボイラープレートが必要になりますHTML とdiv にbody . 我々はそれを与えるdiv クラスcharacter . その中でdiv 私たちのスプライトシートになりますimg クラスでcharacter-spritesheet .
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
</body>
</html>
そして、それは我々がHTMLのために必要とするすべてです!

CSS


我々のアニメーションのために運動の幻想をつくるために、我々は1つのフレームが一度に見える間、すぐにスプーンシートの各々のフレームを通して循環する必要があります.
これを達成するためのキーは.character-spritesheet 使用transform: translate , 適用中overflow: hidden コンテナにdiv .character .
適用transform: translate 画像を指定すると、指定されたX軸とY軸の範囲内でイメージを移動させます.私たちはイメージが0のx位置で始まることを望み、100 %を横切って移動します@keyframes 以下のように:
@keyframes moveSpritesheet {
 from {
      transform: translate(0px,0)
  }
  to {
      transform: translate(-100%,0)
  }
}
それから、我々はアニメーションを.character-spritesheet , 私たちが移動する速度を設定し、どのように多くのフレームが、どのようにアニメーションを移動するにはどのくらいの時間ですか
 .character-spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
 }
アニメーションを作成する最後のキーステップは、コンテナを設定することです.character div 'あなたのアニメーションの1つのフレーム(我々のケースの320 px)のサイズ・サイズと一致して、セットするsoverflow: hidden . 設定overflow to hidden アニメーションの幻想の鍵ですそれはdiv 内なる要素の一部を隠すdiv 's幅と高さ.以来、我々は.character div 'sのサイズは、アニメーションの1つのフレームに等しいように、アニメーションのすべての他のフレームの場所から表示され、移動の錯覚を作成して表示されます!
.character {
  width: 320px;
  height: 320px;
  overflow: hidden;
  position: relative;
}

参考文献


piskelapp.com - ピクセルアート作成ツール
CSS @keyframes
CSS transform: translate
CSS position
ビデオ
偉大なYouTubeのビデオどこで彼ははるかに詳細にこのプロセスを歩いている.あなたが純粋にHTML、CSS、およびJavaScriptを使用してゲームデザインに興味を持っている場合、それは時計の価値があります.

フルコード


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
     <style>
         .character {
        width: 320px;
        height: 320px;
        overflow: hidden;
        position: relative;
      }

      .character-spritesheet {
        animation: moveSpritesheet 1s steps(4) infinite;
      }

      @keyframes moveSpritesheet {
        from {
            transform: translate(0px,0)
        }
        to {
            transform: translate(-100%,0)
        }
      }
     </style>
</body>
</html>
菜鳥のjQueryソース学習ノート(一)
AWS MediaLiveを使って見た