WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

script.aculo.usのエフェクトについて

      2009/10/22

script.aculo.usのエフェクトについて、最近ようやくコードが理解できてきた。 このライブラリの目玉であるeffect.jsは主にアニメーションを目的に利用される。簡単なものから、Flashと見まがうようなちょっと凝ったものまで作ることが可能だ。その際、アニメーションの時間調整などはdelayやqueueオプションを駆使していくことになる。たとえば、queueオプションのpositionプロパティ(個々のエフェクトの順番を決めるプロパティ)は全部でfront、parallel、end、with-lastと四つあり、これらをどう使い分けていくかも重要になってくるわけだ。 script.aculo.us(以下scripty)のエフェクトを理解することは、キュー(queue)について理解することでもある。キューとは、複数のエフェクトの順番を保存しておく入れ物のようなもので、原則的にキューの最後尾にエフェクトは追加される。ただし、このqueueオプションによっては、すでにキューに追加されたエフェクト群の先頭に追加することもできる。 また、個々のエフェクトにはstartOnとfinishOnというエフェクトの開始終了時間を示すプロパティがあり、単純にstartOnの時間になるとそのエフェクトが開始され、finishOnの時間になるとエフェクトが終了する仕組みになっている。startOnプロパティはstartメソッドが呼ばれた時点では、ただのdelayプロパティ(デフォルトは0)の数値だが、queueにエフェクトが追加される際に、new Date().getTime()による1970年以来のミリ秒単位の経過時間がプラスされる。このように、キューに登録されたエフェクトは、実際に順番が割り振られるわけではなく、単純にstartOnとfinishOnプロパティで指定された時間に開始と終了を行うだけである。これらの時間を調整することでエフェクトを順番通りに実行することが可能となっている。 エフェクトの時間制御さえしっかりやれば、豪華なアニメーションも可能だということです。

 - JavaScript/Ajax , ,