jQuery の .animate() で普通のオブジェクトをアニメーションさせる
説明するより見たほうが早かったりして。
$({ x:0, y:100 }) .animate({ x:100, y:50 }, { duration:5000, progress:function (anim, progress, fx) { console.log('x:' + anim.elem.x, 'y:' + anim.elem.y)); } })
このように、プリミティブなオブジェクトでも animate
メソッドでグリグリと値を変化させられる。通常の animate
と同じように、 duration
や easing
といったオプションも指定できる。
案外知られていないのではなかろうか。スムーススクロールなどに使えそうですね。
jQuery 1.7.x 以前の場合
jQuery 1.7.x 以前は、 animate
メソッドのオプションとして progress
を指定できない。その場合は step
を使用する。
$({ x:0, y:100 }) .animate({ x:100, y:50 }, { duration:5000, step:function (now, fx) { console.log(fx.prop, now); } })
注意点として、 step
に指定した関数は、アニメーションさせたいオブジェクトが持つプロパティの数ぶんだけ実行されるという点がある。たとえば上述のコードで、秒間20コマのアニメーションがあるとすると(jQuery.fx.interval == 50
)、5秒間で100コマのアニメーションとなる。 step
に指定した関数が呼ばれる回数はこれにプロパティの数を掛けた分になる。つまり200回。パフォーマンス的にはよろしくないかもしれない(未測定)。