taccglはHTML5/Canvasを使った2D/3Dアニメーションライブラリです。

Web上でインタラクティブなアニメーションを実現したいならば参考にしてみて欲しいのがtaccglです。2Dおよび3Dに対応したアニメーションをHTML5のCanvasで実現します。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.05_thumb.1359513933.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.05.1359513933.png)
例です。立方体が回転します。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.13_thumb.1359513938.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.13.1359513938.png)
完全にばらばら。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.21_thumb.1359513942.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.21.1359513942.png)
細く切れた断片が飛んでくるデモ。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.27_thumb.1359513948.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.27.1359513948.png)
平面として回転するデモ。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.34_thumb.1359513952.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.34.1359513952.png)
円形になるものも。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.51_thumb.1359513957.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.26.51.1359513957.png)
カール。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.02_thumb.1359513962.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.02.1359513962.png)
ボックスが下から飛んでくるデモ。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.24_thumb.1359513966.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.24.1359513966.png)
オブジェクトが回転します。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.41_thumb.1359513970.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 10.27.41.1359513970.png)
水平方向への回転。

GPUアクセラレーションが有効であればそちらを使うようになっており、より滑らかなアニメーションが実現します。既存ページへのアニメーションの追加も行えるようになっており、インパクトある表現が可能です。

taccglはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

Flashによるアニメーションの場合、スプラッシュで使われるケースが殆どです。そのため一度目はともかく、二度目以降はスキップされるケースが多くなります。これではせっかく作ったのに勿体ないでしょう。

taccglの場合、Webベージ内に埋め込んでユーザのアクションによってアニメーションを実行します。よりインタラクティブでユーザを飽きさせないコンテンツの提供が可能になるでしょう。GIFアニメーションとはまた違う面白さがありそうです。

HTML5 Canvas 2D and 3D (WebGL) Accelerated javascript Animation Library - taccgl