TweenMax, TweenLite を使った回転アニメーションのメモ。
0 -> 180, 180 -> 360 と時計回り回転を分割実行した時 180 -> 360 が逆時計回りになるのを防ぐ。
DirectionalRotationPlugin
DirectionalRotationPlugin を使う方法があるらしい。
github: DirectionalRotationPlugin.js
greensock: DirectionalRotationPlugin
greensock Docks: DirectionalRotationPlugin
_cw, _ccw suffix を設定値に付与することで方向を設定可能。
TweenLite.to(yourElement, 1, {rotation:"270_ccw", rotationX:"-45_cw", rotationY:"+=30_cw"}); |
_cw: clockwise 時計回り
_ccw: counter-clockwise 逆時計回り
transform-origin
回転時に transform-origin を設定する。
GreenSock Forums: Separate transform origin and X, Y coordinates?
TweenMax.set(myElement, {transformOrigin:"0 0 0"}); |
GreenSock Forums: Help with RotationX and transformOrigin
TweenLite.set(".card", {transformOrigin:"left 95px", transformStyle:"preserve-3d"}); |
【その他】
Greensock Forums: Direction of rotation (clockwise / counterclockwise)
Greensock Forums: A question of tweenlite rotation
Greensock Forums: Forcing a clockwise rotation always – possible?
全てを試してないけど解決方法は色々あるらしい。