scriptaculousのトランジション

私が満足できないのは、要素の移動・サイズ変更です。既存のライブラリはどれも等速運動で、満足できる動きをしてくれません

私もこれまで全くそうだと思っていたのだが、今回必ずしも等速というわけではないことが分かった。

ちょっと突っ込んだ内容だったので省いたのだが、scriptaculousにはTransitionというのがある。effects.jsをTransitionで検索してもらえれば発見出来るはず。例えば以下のようなものだ。

Effect.Transitions.sinoidal = function(pos) {
  return (-Math.cos(pos*Math.PI)/2) + 0.5;
}

これを見るだけではなんのことだかといった感じだが、要するにエフェクトの変化曲線を定義している。例えばこれであればsin曲線を描いてエフェクトの適用量が変化する。

エフェクトをちょっと使ってみると、ゆっくり変化し始めて中盤は素早く、そしてゆっくり変化が終わる、と言う風に見えるはずだ。デフォルトのトランジションがこのsin曲線になっているからである。

他にも、いくつかのトランジションが予め用意されているが、もちろんこれは単純に（０→１に変化する）posを受けて（０〜１の間で）値を返せば良いだけなので、そういうものを自分で書いてセットしてやっても良い。

トランジションの設定は、エフェクトのコンストラクタでオプションにtransitionをセットする。

new Effect.MoveBy( 'hatena3', -100, 100, {
    transition : function ( pos ) {
        return Math.pow( pos, 2 )
    }
});

とかとか。

ライブラリが万能だとは思わないが、自分で書くのはおっくうだったりも（というか私にはまだ書けない気が…）するので、うまく使って楽をしたいところ。