JSONでアニメーション用のメタ言語を作ってみた

　ianime.jsもようやく安定して動き出したので、スライドショーを作ってみようと思ったのだが、通常のjavascriptのイベント処理を使って作ろうとすると、(1)最初のアニメーションの動作を指定し、(2)そのアニメーションの終了イベントを受けて次の指示を出し、...と、ものすごいスパゲッティ・コードを書かねばならなくなる。

　それがどうしても耐えられなかったので、色々と試行錯誤をしているうちにたどり着いたのが、JSONを使ったアニメーション専用のメタ言語である。下の例の太字の部分がそれ。

function start()
{
    anime.addSequence([ 
        { duration:3000 },
        { id:'pic4', effect:'fadeout', duration:3000 },
        { duration:3000 },
        { id:'pic3', effect:'fadeout', duration:3000 },
        { duration:3000 },
        { id:'pic2', effect:'fadeout', duration:3000 },
        { duration:3000 },
        { id:'pic4', effect:'fadein', duration:3000 },
        { id:'pic3', effect:'fadein' },
        { id:'pic2', effect:'fadein' },
        { onComplete:start }
    ]);
}

　上から順番に説明すると、

• 何もせずに３秒間待つ（一番上にあるpic4が表示される）
• ３秒間かけてpic4をフェードアウトする（pic3が見えてくる）
• 何もせずに３秒間待つ
• ３秒間かけてpic3をフェードアウトする（pic2が見えてくる）
• 何もせずに３秒間待つ
• ３秒間かけてpic2をフェードアウトする（pic1が見えてくる）
• 何もせずに３秒間待つ
• ３秒間かけてpic4をフェードインする
• フェードアウトしてあったpic3を元に戻しておく（pic4に隠れて見えない）
• フェードアウトしてあったpic2を元に戻しておく（pic4に隠れて見えない）
• 最初に戻る

となる。直感的にアニメーションのシーケンスが記述できるので、私自身はとても気に入っているのだがいかがだろう。

　上のサンプルをIFRAMEの形で下に貼付けておいたので、興味のある人はソースコードをコピーして、自分なりのスライドショーを作って遊んでみていただきたい。フェードイン・アウトだけでなく画像を移動させることも可能だし、テキストを含むdivやspanをフェードイン・アウトさせたり、ということも自由にできる。

　ちなみに、ianime.jsは若干進化してv0.24。v0.24に追加した機能のドキュメントはまだ書いていないが、このサンプルを見ていただければだいたいのことは分かっていただけると思う。

Comments

[kdoya]

下記のようにできたらもっと使いやすいかなと思いました。
javascriptの実装はよんでませんが...。

追加パラメータ(iAnime)
id:挿入先id
default_path:画像読み込みパス

変更パラメータ(anime.addSequence)
id->file:画像ファイル名

使用例）
--------------------------------------

var anime = new iAnime(id,default_path);

function start()
{
anime.addSequence([
{ duration:3000 },
{ file:'name1', effect:'fadeout', duration:3000 },
.....
{ file:'name2', effect:'fadein' },
{ onComplete:start }
]);
}