Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ「CAKE（Canvas Animation Kit Experiment）」 // MOONGIFT Archived

CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。

HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。

最もシンプルなデモです。サークルが回転します。

それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。

色々なデモあります。

流れるような動きが格好いいです。

マウスで大きさを変えられます。

大きなモデルの周囲を小さなモデルが回ります。

ベジュ曲線調に光が下りていきます。

枝が進んでいくデモです。

四角が回転するデモです。

SVGを表示するデモです。

CAKEはアニメーションを実行する以外にもゲームにも利用できます。公式サイトでは幾つかのゲームデモが紹介されています。アニメ的な動きではなく、幾何学的でCGにも似た動きを行ってみたいと考えるときに使ってみてください。

CAKEはJavaScript/HTML5/Canvasを使ったMIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

CAKEは短縮しない場合で200KB超、短縮してGzip圧縮しても28KBもある大型なライブラリになっています。そのためスマートフォンなどのモバイルでは動作が苦しいかも知れません。しかしHTML5を使ったアニメーションやグラフィカルなゲームを考える場合に役立つ可能性が高そうです。

HTML5でのゲームは徐々に増えてきています。CAKE自体はグラフィックスに特化していますが、物理エンジンやゲームフレームワークと組み合わせることでもっと面白い動きが実現するかも知れません。HTML5ゲームは最もあつい技術の一つなので、動向を逐一チェックする必要があるでしょう。