ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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ゲームは最もあつい技術の一つなので、動向を逐一チェックする必要があるでしょう。

デモ1:Hello CAKE!

デモ2:CAKE - Canvas Animation Kit Experiment

デモ3:CAKE CGA

デモ4:デモ:MISSILE FLEET

デモ5:Web Mega Pong

cakejs - CAKE - Canvas Animation Kit Experiment - Google Project Hosting

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2