JavaScriptでタイムラインベースのアニメーションを実現する「mashi」
mashiはJavaScriptベースのタイムライン指定のアニメーションを実現するツールキット。
mashiはJavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを実現しようと思うと、技術的に候補にあがるのがアニメーションGIF、Flashそして動画だろう。どれもあまり動的に作り出すものではないので、再利用性やシステムとの親和性は高くない。
画面上の部分がアニメーションする
もっと手軽にアニメーションを作ったり閲覧することができれば、Webサービスのアピール方法が変わるかもしれない。そのためのツールキットがmashiになる。タイムラインに則って、情報をスムーズに切り替えることが可能だ。
mashiはベースになる幾つかのツールキットを組み合わせつつ、app.jsというファイルを編集してタイムラインを作っていく。作られたアニメーションは再生ボタンがあり、それを押すと再生が開始する。タイムラインに沿ってスライドが切り替わったり、文字がフェードイン/アウトしたりする。まるでFlashアニメーションだ。
多言語対応
多言語化にも対応していてタイムラインがはじまる時に表示言語を選ぶこともできる。プレゼンテーションをmashiを使って作ったり、システムの説明動画をmashiに置き換えたりすることもできるだろう。欠点としては大型なツールキットであるため、動作するまでに時間を要することだろうか。しかし今後に大いに期待したいライブラリだ。
MOONGIFTはこう見る
mashiでは単なるアニメーションだけでなくユーザの選択によって内容を変える、ゲームのようなこともできるようになっている。そうした拡張性もJavaScriptならではと言えそうだ。CSS3と組み合わせることで多様なイフェクトを実現しているデモなどもあり、一見の価値がある。
読み込むファイルが大きいために、スマートフォンには向かないかもしれない。FlashをHTML5化するライブラリもあるが、こちらは正当にJavaScriptでFlashライクなアニメーションを開発する。周辺ツール（作成ツールなど）が充実すると一気に広まるかもしれない。
mashi - javascript timeline toolkit