Animated Image Piecesは、画像が細かいピースに分解されるアニメーションを実装できるのが特徴です。1つ1つ小さなピースがバラバラになり、再構築されて次の画像を表示したりといったことが可能です。
Animated Image Pieces
下記のページから、Animated Image Piecesの実際のデモ動作をチェックできます。
デモは全部で4タイプ用意されています。画面の右下から各デモを切り替えることが可能です。
デモ1ではいくつか人の名前が表示されていて、いずれかの名前を選択すると現在表示されている画像が細かいピースに分解されて、再構築して目的の画像を表示させるといった一連のアニメーションを確認できます。
単純に画像を切り替えるだけでなく、このようなエフェクトがつくことでとても印象に残りやすいですね。スタイリッシュでとてもかっこいいアニメーションです。
また、デモ2ではエフェクトが3種類も用意されています。バラバラになったピースが上に飛んでいったり横に飛んでいったりと、エフェクトを変えることでいろんなパターンをチェックできます。
デモ3では、中央に表示されているバレリーナの画像をクリックすると、細かいピースが四方に散らばり、その中心にメニューが表示されます。Backをクリックすると、散らばった画像のピースが元の状態に戻る仕組みです。これもかなりオシャレですね。
いろんな種類のデモを見ることができるので、アニメーションの参考にぜひチェックされてみてはいかがでしょうか？
Animated Image Piecesの詳細やダウンロードは、下記のページからどうぞ。
