イナヅマTVログ

[JavaScript] TweenMax / TweenLite, onUpdateでゴニョゴニョしたい時のおまじない

| 0件のコメント

名前空間汚染が著しい GreenSock のjavaScript Tween Engine, TweenMax / TweenLite ですが、なかなか便利なので使うのを止められません。

モーション対象をtargetに指定すれば、勝手にプロパティ値を変更しアニメーションしてくれます。

でもそうじゃなくて、tween計算の値を使い自前で変更したい時の作法が分かりにくかったのでメモっときます。

TweenMax.to(
    { prop: startValue },
    duration,
    {
        prop: targetvalue,
        onUpdate: function ( tween ){
            var prop = tween.target.prop;
        },
        onUpdateParams: [ "{self}" ]
    }
);

【手順】
onUpdateParams[ "{self}" ]を指定します。
onUpdate の 引数で tween オブジェクトを受け取り target を取出します。

target はモーション値が計算された値が入ったオブジェクトなので Key を指定し値を取出します。

GreenSockのDocsに全て書いてあります。
http://api.greensock.com/js/

【おまけ】ライセンスの話
TweenMax / TweenLite のライセンスはActionScript版と同じです。
無料で公開されるなら商用コンテンツでも無償で使用可能です。
有料(何かを購入しないと見られない)だったり、有料会員向けの場合はライセンスを購入する必要があるようです。

http://www.greensock.com/terms_of_use.html
https://www.greensock.com/licensing/

ライセンスを購入すると機能追加(プラグイン)がダウンロード可能になります。

コメントを残す