イナヅマTVログ

[JavaScript] TweenMax / TweenLite rotation 方向(direction)設定

| 0件のコメント

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?

全てを試してないけど解決方法は色々あるらしい。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください