どうも、レーウィンです。
ブログに関する告知を1つ、左メニューに設置しました。基本的にスルーして大丈夫ですが、このブログのURLをリンクしていただいてる方は一応見てください。
今回はTweenMaxに関すること。
自分は単純なアニメーションはよくTweenMaxを使ってアニメーションするのですが、一部指定してはいけないものがあるので、その共有です。内部的なことを知ってる人からしたら、まあそうだよねって部分になります。
対策できない数値
margin: “auto”
margin:”auto”は要素を上下左右中央に配置する時に指定すると思いますが、例えばmargin: “0 0 0 -10%”からmargin: “auto”に変更するアニメーションをさせようとするとカクッとなります。
calc
cssはcalcがあって、例えばcalc(50% – 100px)という風に指定しますがleft: 0からleft: calc(50% – 100px)にアニメーションさせようとするとカクッとなります。
この2つに関しては自分の調べた限りではTweenMaxでアニメーションさせるのは無理です。
というのも、TweenMaxの内部処理的な話をすると、例えば10pxから0pxにアニメーションをさせようとしたら
10px→9px→8px→7px→…→0px
という風に数値を高速で変えることでアニメーションさせているわけです。
つまり、AからBに変えようとする時、「その中間となる数値がでないといけない」わけです。
では、margin:”0 0 0 -10%”とmargin:”auto”の間の数値ってなんでしょうか。
また、0とcalc(50% – 100px)の間の数値ってなんでしょうか。
この中間をTweenMaxの内部には計算する式がないのです。
つまり間の数値が出せない値をTweenMax.toで置いてもアニメーションさせることはできません。
marginで一括指定
cssでmargin: -10% 0 0 0等指定してる上で、TweenMax.toでmargin:0 0 0 0にアニメーションさせようとするとカクつく場合があります。
これに関しては原因がよくわからないです。てへぺろ。
ただ、これに関しては対策ができます。
アニメーション前にTweenMax.setを使ってCSSで指定している値を指定し直すことでカクつかなくすることができます。
また見付けたら追記していきます。ではでは~。