yeffects(わいえふぇくつ) version 0.1

yeffects(わいえふぇくつ)ってなに?

yeffectsとは、jQueryを利用したJavaScriptアニメーション制作補助ライブラリです。

jQueryではフェードインなど単発のアニメーションは簡単に記述できますが、あるアニメーションを開始してそれから約0.1秒後に別のアニメーションを開始・・・というような複雑なアニメーションを実現しようとすると少々処理を記述しなければなりません。

yeffectsを使うと、複雑なアニメーションを比較的簡単な宣言によって実現することができます。
こんな風に:

サンプル:
(「実行!」ボタンを押すと、ヌーーーーという文字がだんだん現れます。)




コード:

var anim = new YPar([new YAnimate("#ch_1", "alpha", [0, 100], 1000),
             new YSeq([new YWait(200), new YAnimate("#ch_2", "alpha", [0, 100], 1000)]),
             new YSeq([new YWait(400), new YAnimate("#ch_3", "alpha", [0, 100], 1000)]),
             new YSeq([new YWait(600), new YAnimate("#ch_4", "alpha", [0, 100], 1000)]),
             new YSeq([new YWait(800), new YAnimate("#ch_5", "alpha", [0, 100], 1000)])]);

...

onclick="(new YEngine(anim)).start();"


yeffectsでは、基本的にはアニメーションを 並列(Parallel)順序(Sequence)待機(Wait)スタイル変化(Animate)の組み合わせで表現します。
(要素をカスタムで追加することもできます。
この考え方はSMIL(Synchronized Multimedia Integration Language)を参考にしています。)

たとえば、上記のサンプルならば、以下のような形式でアニメーションを表現しています。

これらの要素を組み合わせれば、複雑なメニュー表示アニメーションなどを、オブジェクト定義だけで実現することができます。

詳しくはリファレンスを参考にしてください。


ダウンロード

利用上の注意など

このライブラリは MIT Licence(日本語訳) に基づき配布をおこなっています。
もし使用してくださる方がおられる場合は、以下の点にご注意ください。

ダウンロード


リファレンス

だんだんと充実させていく予定。


TODO


変更履歴



Copyright(C) 2009 やざわラボ