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

GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。

そこでさらに高度なアニメーションを実現したい時に使えるのがGreenSockです。そしてGreenSockをベースにアニメーションを作成できるエディタがanimachineになります。

animachineの使い方

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

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

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

フルスクリーン表示。
フルスクリーン表示。

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

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

animachine css mars landing demo

animachine/animachine

 

MOONGIFTの関連記事

  • DevRel
  • Com2