5_2 離散関数

CSS AnimationsとCSS Transitionsのタイミング関数には、出力される値が途切れる離散関数も指定できます。指定にはsteps()関数を使用します。

steps( number_of_steps, direction )

number_of_steps:正の <integer>(整数) で、階段の段数。

direction:値がいつ切り替わるかを表すキーワード。startとend

これも、文字よりも図を見た方がうまく理解できます。

上図の左はsteps(2, start)、右はsteps(4, end)の動作をグラフ化したものです。左は階段の数が2で、アニメーションの開始時(start)に値が切り替わります。したがって、関数が返す値は、横軸が0の瞬時に0、0->0.5のとき0.5、0.5->1のとき1の値になります。右は階段の数が4で、アニメーションの終了時(end)に値が切り替わります。したがって、関数は、横軸が0->0.25のとき0を、0.25->0.5のとき0.25を、0.5->0.75のとき0.5を、0.75->1のとき0.75を返します。

steps()関数を前の雲のアニメーションに適用すると、雲の動きがかくかくします。

かくかくしながら上下し右へ移動する雲

かくかくして見えるのは、steps()関数が、連続関数のように途切れのな連続した値でなく、飛び飛びの値を返すからです。steps()関数はスプライトシートを使ったアニメーションによく使用されます。

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

スプライトシートとは、下図に示すような、複数の画像を並べたものを言います。CSSやJavaScriptを使って、スプライトシートを適切な長さだけ速く移動させることで、画像が動いているような錯覚を生み出すことができます。

以下は、上の例のスプライトシートアニメーションで使用しているHTMLとCSSコードです。

<div class="zombie zombie-idle"></div>
/*  ゾンビのフレームサイズ*/
.zombie{
  width:  110px;
  height: 115px;
  margin: 10% auto;
}
/* アイドリング状態のスプライトシート */
.zombie-idle{
 /* https://opengameart.org/content/mini-zombie */
  background-image: url("images/zombie_idle.png");
  animation: spritesheet-anim 800ms infinite steps(12);
}
@keyframes spritesheet-anim{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: -1342px 0;
  }
}

<div>要素には、2つのクラスを適用しています。zombieクラスでは幅と高さを指定しています。これは言わば、Webページに空いた”穴”で、この向うを横に細長いゾンビのキャラクターの画像ファイルが左に移動します。zombie-idleクラスではゾンビの画像を指定し、steps()関数を使ったアニメーションを設定しています。steps()関数に渡している12という数値は、スプライトシートのゾンビの数です。0.8秒かけてキャラクターが12回変わるので、動いて見えるのです。

@keyframes spritesheet-animでは、背景画像(つまりゾンビのスプライトシート)を左に画像の幅分だけ移動させています。

分かってみれば何ということのないテクニックですが、思いついた最初の人は大したものです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA