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

CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。

そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション系に強いJavaScriptライブラリです。

Agile Css3 Engineの使い方

オブジェクトの表示。画像や図形などを描けて、かつそれらをアニメーションできます。
オブジェクトの表示。画像や図形などを描けて、かつそれらをアニメーションできます。

こちらはCSSスプライトをAgile Css3 Engineから生成しています。
こちらはCSSスプライトをAgile Css3 Engineから生成しています。

エンドレススクロール。上下にスクロールし続けます。
エンドレススクロール。上下にスクロールし続けます。

線や円などの描画も可能です。
線や円などの描画も可能です。

車のアニメーション。こういったアニメーション処理が得意なようです。
車のアニメーション。こういったアニメーション処理が得意なようです。

ボールがアニメーションしながら図形を描きます。これらをスタイルシートだけでやるのは至難の業でしょう。
ボールがアニメーションしながら図形を描きます。これらをスタイルシートだけでやるのは至難の業でしょう。

トゥイーン系のアニメーションです。
トゥイーン系のアニメーションです。

ドロー。iOS7風。
ドロー。iOS7風。

ボックスが3D空間で回転するデモです。
ボックスが3D空間で回転するデモです。

ムービークリップ。アニメーションです。
ムービークリップ。アニメーションです。

iPhoneを描画するデモです。
iPhoneを描画するデモです。

パノラマ。写真をパノラマ風に表示しています。
パノラマ。写真をパノラマ風に表示しています。

フォーム。3D空間をアニメーションしています。これは面白い効果ですね。ちゃんとクリックやドラッグができます。
フォーム。3D空間をアニメーションしています。これは面白い効果ですね。ちゃんとクリックやドラッグができます。

Agile Css3 Engineはクロスプラットフォームに対応し、デスクトップからスマートフォンまで幅広く動作します。またキーフレームベースのアニメーションもサポートしています。Agile Css3 Engineを使えばCSS3を使った(CanvasやSVG、WebGLは使っていません!)アニメーション処理が手軽に実装できそうです。

Agile Css3 EngineはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Agile Css3 Engine

a-jie/Agile

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2