Life is beautiful

　一つ前のエントリーで紹介したJavascript上のアニメーション記述言語（格好良い名前募集中^^）。先の例は単に上から順番に実行するだけであったが、それだけでは１度に一つのオブジェクトしか動かすことができず、表現力に乏しい。より複雑なアニメーションを実現するには、複数のオブジェクトに別々の動作を同時にさせることができなければだめだし、記述言語もそれをサポートしていなければならない。

　そこで試しに実装してみたのが、シーケンスの入れ子構造による並行処理の記述。けっこうすごいことができてしまうのだが、実装は意外にあっさりとできてしまったので（Javascriptで数行）自分でも少し驚いている。

　ちなみに、動作A, B, C, D, Eを順番に実行させる場合には、先の例のように、

　[A, B, C, D, E]

と書けば良い。これはすなわち、「Aが終わったらB、Bが終わったらC、...」という意味である。

　ここで、このアニメーションの実行に加えて（つまりメインのシーケンスには手を加えずに）、「Bが終わったらP、Pが終わったらQ」（つまりPとCは同時に実行される）と指示を出したい場合には、

　[A, B, [P, Q], C, D, E]

と書けば良いのだ。具体的な例で言えば、

 [
        { duration:3000 },
        { id:'pic4', effect:'fadeout', duration:3000 },
        [
            { id:'text1', effect:'settext', text:'Hello World', duration:2000 },
            { id:'text1', effect:'fadeout', duration:500 }
        ],
        { duration:3000 },
        { id:'pic3', effect:'fadeout', duration:3000 },
        { duration:3000 },
        { id:'pic2', effect:'fadeout', duration:3000 },
        ...
    ]

と書くことになる。太字の部分が[P,Q]に相当する部分だ。

　こんな説明だと、何の話だかピンと来ないだろうから、実際のサンプルを貼付けておく。一つ前のサンプルと全く同じシーケンスで写真を順番に表示しつつ、それぞれにキャプションをつけるというシーケンスを入れ子構造にして挟み込んでいる点がミソである。