アバターアニメーション(スプライトシート)

アバターアニメーション(スプライトシート)

こんにちは。そらのくろうさぎです。

前回の連番PNGアニメーションに続き、今回はスプライトシートを使ったアバターアニメーションを作成しました。

スプライトシートを使うことでアニメーションのコマを1枚の画像にまとめられるため、keyframesで背景画像の表示領域を更新するだけでアニメーションのコマ画像を切り替えられます。 前回の力技とは違い、今回はCSS3の仕様に沿ったコードでアバターアニメーションになりますので、現行のぼほすべてのブラウザで動作を確認することが出来ます。

動作ブラウザ

Safari(快適)
Chrome(快適)
InternetExplorer10以降(快適)
Firefox(快適) AndroidChrome(等倍は快適)
Android標準ブラウザ(等倍は快適)
※PC・モバイルどちらもほぼ快適に動作します。

スプライトシート

上のスプライトシートを使います。

アニメーションの設定

animationプロパティを設定します。
前回の連番PNGと同じ設定を使用します。

-webkit-animation: AvatarAnimation 1.5s step-start infinite 0s normal;  
-webkit-animation-play-state: running;

/* Firefoxのベンダープレフィックスを追加 */
-moz-animation: AvatarAnimation 1.5s step-start infinite 0s normal;
-moz-animation-play-state: running;

/* CSS3のプロパティを追加 */
animation: AvatarAnimation 1.5s step-start infinite 0s normal;
animation-play-state: running;

キーフレームの設定

アニメーションのキーフレームを設定します。
background-positionでコマごとの表示領域を設定します。

@-webkit-keyframes AvatarAnimation {
    0% { background-position: 0px 0px; }
    3% { background-position: -200px 0px; }
    6% { background-position: -400px 0px; }
    ・
    ・
    ・
    100% { background-position: 0px 0px; }
}

/* Firefoxのベンダープレフィックスを追加 */
@-moz-keyframes AvatarAnimation {
    0% { background-position: 0px 0px; }
    3% { background-position: -200px 0px; }
    6% { background-position: -400px 0px; }
    ・
    ・
    ・
    100% { background-position: 0px 0px; }
}

/* CSS3のプロパティを追加 */
@keyframes AvatarAnimation {
    0% { background-position: 0px 0px; }
    3% { background-position: -200px 0px; }
    6% { background-position: -400px 0px; }
    ・
    ・
    ・
    100% { background-position: 0px 0px; }
}

HTMLタグの定義

連番PNGと同じタグを使用します。

<div id="Avatar">
    <p>
        AvatarView
    </p>
</div>    

動作確認

まとめ

スプライトシートはとても汎用性が高く、webブラウザだけではなくアプリケーションにもアニメーションを組み込むことが出来ます。 アニメーション処理も非常に軽く、モバイルブラウザ用のアバター表示にも最適かもしれません。 ただ、Androidの場合は機種ごとに動作が異なることがありますので、実機での検証は十分に行いましょう。 Android標準ブラウザではCSSよりもJavascriptの方が処理が軽くなることが多いようです。