TweenMaxでXやYを使ってアニメーションした時、アニメーション中に半ピクセルずれる不具合について

どうも、レーウィンです。
今回はTweenMaxでの詰まり所の1つと、その解決策について。

現象について

$(".btn_01").hover(function() {
	TweenMax.to(".btn_01 img", .2, {ease: Power0.easeNone, y: 5});
},function() {
	TweenMax.to(".btn_01 img", .2, {ease: Power0.easeNone, y: 0});
});

.btn_01にホバーした時、そのボタンの画像を5px下げるっていうプログラム。
これだけ見ると、とくに違和感はないように見えるけど・・・。
稀に、アニメーション中だけ半ピクセルずれてブラウザ上で表示されてしまう場合がある。
ホバー完了時とホバーする前の状態は同じなのに、ホバーしてアニメーションが実行されている間だけ半ピクセルずれる。

原因について

TweenMaxではアニメーションを極力軽く、なめらかにしようとする働きがある。
その結果、どういう仕様になるかというと、例でいうとy5pxに行くまでの間はtranslate3Dを使用し、5pxになった瞬間matrixを使用する仕様になっている。
3Dで動かした方がなめらかに動くし、とまっている間は3Dにする必要がないので、理にかなっている。
ただ、matrixとtranslate3Dはプロパティが異なる以上、ほんの少しだけ差異が発生する場合がある(これはTweenMaxのせいというか、ブラウザサイドのバグだと思ってる)
その結果、その差異によって半ピクセルずれてしまう場合があるというわけ。

解決策について

TweenMaxには「このアニメーションは常に3D表現にする」もしくは「このアニメーションは常に3D表現にしない」という設定ができる。それは「force3D」。
(公式URL→https://greensock.com/docs/Plugins/CSSPlugin)
force3D: trueだと、「このアニメーションは常に3D表現にする」。
force3D: falseだと、「このアニメーションは常に3D表現にしない」。
例だと・・・

$(".btn_01").hover(function() {
	TweenMax.to(".btn_01 img", .2, {ease: Power0.easeNone, y: 5, force3D: false});
},function() {
	TweenMax.to(".btn_01 img", .2, {ease: Power0.easeNone, y: 0, force3D: false});
});

こんな感じになる。これで解決。
今回のケース以外でも、もし、アニメーション中に違和感を感じた場合はこれを記述してみていいと思う。

では。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。