GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。 そこでさらに高度なアニメーションを実現したい時に使えるのがGreenSockです。そしてGreenSockをベースにアニメーションを作成できるエディタがanimachineになります。

animachineの使い方

エディタ画面です。下にタイムライン、上にプレビューが表示されます。

クリックしてオブジェクトの形を変えたり、移動できます。

選択状態です。WYSIWYGに編集できるので分かりやすいです。

フルスクリーン表示。

animachineはGoogle Chrome機能拡張で、実行するとGreenSockで作られたコンテンツ上にエディタ機能を表示してくれます。アニメーションは繰り返し実行され、任意のポイントで停止させて編集ができます。HTML5アニメーションの作成が捗ることでしょう。

animachineはHTML5/JavaScript製、Google Chrome用のオープンソース・ソフトウェア（MIT License）です。

animachine css mars landing demo animachine/animachine