TweenMaxで不具合が起きる値の指定


どうも、レーウィンです。
ブログに関する告知を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で指定している値を指定し直すことでカクつかなくすることができます。

また見付けたら追記していきます。ではでは~。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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