scriptaculousのトランジション
私が満足できないのは、要素の移動・サイズ変更です。既存のライブラリはどれも等速運動で、満足できる動きをしてくれません
私もこれまで全くそうだと思っていたのだが、今回必ずしも等速というわけではないことが分かった。
ちょっと突っ込んだ内容だったので省いたのだが、scriptaculousにはTransitionというのがある。effects.jsをTransitionで検索してもらえれば発見出来るはず。例えば以下のようなものだ。
Effect.Transitions.sinoidal = function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; }
これを見るだけではなんのことだかといった感じだが、要するにエフェクトの変化曲線を定義している。例えばこれであればsin曲線を描いてエフェクトの適用量が変化する。
エフェクトをちょっと使ってみると、ゆっくり変化し始めて中盤は素早く、そしてゆっくり変化が終わる、と言う風に見えるはずだ。デフォルトのトランジションがこのsin曲線になっているからである。
他にも、いくつかのトランジションが予め用意されているが、もちろんこれは単純に(0→1に変化する)posを受けて(0〜1の間で)値を返せば良いだけなので、そういうものを自分で書いてセットしてやっても良い。
トランジションの設定は、エフェクトのコンストラクタでオプションにtransitionをセットする。
new Effect.MoveBy( 'hatena3', -100, 100, { transition : function ( pos ) { return Math.pow( pos, 2 ) } });
とかとか。
ライブラリが万能だとは思わないが、自分で書くのはおっくうだったりも(というか私にはまだ書けない気が…)するので、うまく使って楽をしたいところ。