読者です 読者をやめる 読者になる 読者になる

Tween3とsetTimeoutの最適化

JavaScript Tween

JSTweener ライクなアニメーション code snippets - 0xFFTween2.js - 0xFFの続編です。

今までは、複数のアイテムを動かす時に動かすモノの数だけタイマーが必要でした。対して、JSTweenerはタイマー一つで動くように作られていて、自作Tweenもそうしたいと思いつつ、そういう場合は素直にJSTweener使えばいいかと思っていました。
が、ちょっと極力コンパクトな実装(ブログパーツ的なものに貼り付けたりするので、サイズ的にも、名前空間的にも)が必要になったので、改めて実装してみました。

http://gist.github.com/188922

で、JSTweener Example (Motion Typo)を Tween3で再現してみたり Tween3.js (JSTweener Example (Motion Typo))

まあ、割といい感じかなと思い、比較のためTween2でのデモ Tween2.js (JSTweener Example (Motion Typo)) も用意。

ここで、んん、と思いました。なんかTween2とTween3に差がないような…

じゃあ、同時に動かしてみればいいじゃない、ということで、Tween Examples (Motion Typo) を試してみたら、あらら。なんとIE以外のブラウザでは、タイマー(setTimeout)をひとつにしてもほとんどパフォーマンスが変わりません。

そして、IEではひとつが動いているとほかの動きを止まります。正直、これが一番驚きでした。なんか前に似たような話を聞いたことがあるようなないような気もしますが、さすがIEです。

結論としては、Tween2で十分だったかなという気がします。