スプライトアニメーションを使った最近のウェブデザイントレンド
コーダーの小林です。個人的に最近canvasアニメばかり書いています。ブームは衝突判定です。
さて、僕はこれまでウェブサイト上の演出でやるアニメーションというと物理シミュレーションばかりを思い描いていたんですが、それ以外にもスプライトアニメーションという技法がありますね。ウェブ以前から、テレビゲームなどにも使用されていたアレです。
仕事柄最新のトレンドを追わざるをえない立場にあるのは僕だけでなく皆さん同様と思いますが、そういうもののなかにも古典的な技法であるスプライトアニメーションを上手く取り入れているものがいくつか見受けられます。今回はそのなかから４つのサイトをご紹介したいと思います。
ちなみにネタ元はほぼAwwwardsです。
1. ページ遷移のアニメーションに使用
Reebok: Be More Human Experience
ページ遷移の際にブラシで塗りたくるような演出が施されていますが、これがスプライトになっています。実際にはそれだけでなく、css maskプロパティが併用されています。アニメーション自体もcss animationでmask-positionの値を動かすことで制御しているみたいですね。合わせ技が複雑過ぎて、見ているだけで気が遠くなります。
2. ローディングのアニメーションに使用
このサイトではローディング時に自動車の走るアニメが盛り込まれています。シェイプ絵がガチャガチャと複雑に動いているので、いったいどんな計算で動かしているんだ！と不思議に思い調べてみたら、実はスプライトでした。
しかしただ単純にスプライトをやってるという話というだけでもなく、背景画像や自動車などさまざまなパーツがそれぞれ別々の要素として存在しており、それらが個別にアニメーションしているようでした。このローディング演出は背景が複数のパターンに変化するので、そういう複雑な演出をするのにスプライト画像が単純な1枚絵だと重くなりすぎるため、このような構成にしているのかもしれません。
3. ロゴのドローイングに使用
メインビジュアルに使用されているロゴに使用されています。ロゴ自体がフリーハンドで描かれたようなものなので、ウェブでもフリーハンドに見えるような演出にしたんでしょうか。スプライトの実装方法としては至ってシンプルなやり方をしていますが、サイト全体のアクセントとして効果があるように見えます。
4. 背景の演出に使用
女性のバストアップ画像が動画をマスクしているような演出が施されています。なので最初に見た時にはvideoタグをどうにかしているのかと思ってしまったんですが、こちらもごくシンプルなスプライトでした。
スプライトアニメーションが活きるシチュエーション
flashが衰退したとはいえ、canvasやvideoのブラウザ実装が進み、cssですら単体でアニメを扱えるようになって、アニメ的な演出は衰えるどころか以前に増して有効的に活用されているような印象があります。さまざまな技法が存在するなかで、今敢えてスプライトアニメーションを選ぶ利点はどこにあるんでしょうか。
今回例に挙げたウェブサイトから感じた利点は以下2つです。
- 人為的な動きを演出しやすい （1と3）
- プログラムに計算させて動かすには複雑過ぎるものでも実装がたやすい (2と4)
筆で塗りたくるような動きは当然、高度な物理シミュレーションが必要な動き（葉っぱが散る動きや、水の流れとか）、ウェブデザインの技術ではまだまだ足りないものなど色々考えられます。このようなケースでも、画像さえ作成できれば、比較的容易に演出を加えることができるんでしょう。
あとは、このようなスプライト画像を一体誰が作成してくれるのか、ですかね。
アニメーターや動画編集が得意な方、ということになるんでしょうか。業界内にそのようなキャリアの人をまだまだ見かけないのが個人的な肌感覚ですが、そのうちコラボしてみたいですね。