WebGL で作られたモーションアニメーションが大迫力な上にかっこよすぎて痺れた話
doxas : 2015-01-24 13:02:11
二次元でも WebGL が大活躍
今回ご紹介するのは、WebGL を大胆に利用しつつ二次元ベースで非常にカッコいいアニメーションを実現しているデモンストレーションです。
タイトルから察するに、なにかのセッションで発表された資料なのかもしれませんが、作者の方はかなりマルチな才能を持つ方のようです。
非常にカッコよくてデザインセンスも素晴らしいのでぜひご覧になってみてください。
アニメーションによる様々な効果が体感できる
全体的に、イージングをうまく利用しつつ、静から動へ、非常に迫力のあるアニメーションを見ることができます。
ページが開いただけの状態では白い画面と下のほうに小さなアイコンがあるだけの状態ですが、このアイコンをクリックするとアニメーションが始まります。
魅せ方が非常にうまくて、一瞬スクリーン全体を何かが横切ったなあと思った次の瞬間には、違う形のオブジェクトがスッと出てきたりします。
上の画像はふたつのバツ印と丸いサークルが描かれていますが……
次の瞬間にはバツ印がサークルと激突してまるで爆発のような勢いのある大きなアニメーションになり……
さらにそこから……
スムーズに収束していって、最終的にこんな感じに。
これを見るとわかるとおり、最終的には下に並んでいるアイコンと同じ形状にアニメーションが収束するようになっているのですが、その過程が非常に素晴らしいです。
アニメーションの加速度、思わず目を奪われる適切に設けられた時間の空白など、本当に参考になる部分が多いです。
WebGL のハイパフォーマンスなグラフィック処理性能をしっかり引き出しているスムーズな描写も見ていて気持ちがいいです。
技術的には Pixi.js を利用しているようですが、なんにしても見ごたえ十分。
ぜひご覧になってみてください。
