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

アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。

今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。

Scene.jsの使い方

JavaScriptなのでボタンを押したタイミングなどイベント駆動にできます。

別なアニメーションのデモ。

こちらは実用的なデモです。

カードが回転するデモ。

Scene.jsはJavaScriptとCSSを組み合わせてアニメーションを実現します。CSSアニメーションやSVGアニメーションもサポートしています。プリセットを用意したエフェクトもできるので、多数のオブジェクトをまとめて操作するのも簡単です。

Scene.jsはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

Scene.js is a JavaScript Animation Library

daybrush/scenejs: ? Scene.js is JavaScript & CSS timeline-based animation library

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2