Scene.js - JavaScriptでタイムラインベースのアニメーション // MOONGIFT Archived

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

Scene.jsの使い方

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

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

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

カードが回転するデモ。

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

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