iAnime.js でWicketのホームページを作ってみた

　他のアニメーション・ライブラリについて調べていたら出会ったのが、「Javascript animation libraries compared」。Wiketのホームページのアニメーションを、Yahoo! Animation と animator.js の両方を使って実装して比較している。ちょうど良い機会なので、iAnime.jsを使って同じものを作ってみたのがこれ。

・Wiket home page using iAnime.js

　ソースコードはこんな感じ。このJSONベースの言語のおかげで、他の二つよりもずっと簡単だ。

    anime.addSequence([
                [{ id:'top', effect:'bounce', y:top, duration:2000 }],
                { id:'logo', effect:'easeout', duration:2000,
                  x:300+(iBrowse.getWindowWidth()/2-120) },
                [{id:'apache', effect:'fadein', duration:1500}],
                [{id:'wicket', effect:'fadein', duration:1500}],
                [{id:'introduction', effect:'fadein', duration:2000}],
                {id:'download', effect:'fadein', duration:2000}
            ]);

　ちなみに、このアニメーション用の言語の名前だが、JAASL（"ジャーズル"と発音）というのはどうだろう。JSON Asynchronous Animation Sequencing Languageの略だ。

Comments

[haru666]

私の環境では正しく表示されませんでした。
Yahoo!Animationとanimator.jsの方は正しく表示されます。
（中央に表示されるはずのアニメーションのロゴが左上に表示されて止まってしまう。）

OSはXP、ブラウザはIE7を使っています。

[Satoshi Nakajima]

ご指摘ありがとうございます。さっそく修正させていただきました。iAnime.jsそのものではなくて、クライアントウィンドウの高さを取得部分にブラウザー依存部がありました。