MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。

Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。


例。単純にくるくる回転し続けます。


再生、停止、逆再生もサポート。


コールバックを使って順番にアニメーションさせることもできます。

アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。

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

MOONGIFTはこう見る

Web上でアニメーションを実現させる方法は幾つかあります。一番簡単なのはGIFアニメーションでしょう。ついでFlashを使うこともできます。最近ではSVGアニメーションや、PNGを無理矢理アニメーションするAnimation Encoderというソフトウェアもあります。MovieCropはCSS Spriteを使ったアニメーションライブラリです。

動画とは違う楽しみが画像アニメーションにはあるのかも知れません。もっと面白い手法でアニメーションを実現させることもできるかも知れませんし、そもそも最終的にアニメーションGIFであってもその作り出す過程にこだわることだってできます。色々な楽しみ、チャンスが眠っているのではないでしょうか。

mach3/js-moviecrop