こんにちは、CTOのづやです。
今回はTweenMaxの「そんなには使わないかもしれないけど知ってるといいよね」的な書き方を紹介したいと思います。
デフォルトのeasginを指定する
TweenMaxはtoなどのTween系の関数を呼ぶときやコンストラクタなどで、easeパラメータにて任意のイージングを指定できます。
サイト全体でイージングを合わせたいときなど、指定しない際のイージングを変更したい場合があると思います。
そんなときは、↓のように指定してあげると、基本のイージングを変更することが可能です。
TweenLite.defaultEase = Bounce.easeOut;TweenMaxの方を読んだ際も指定したイージングが指定されます。
アニメーション単位でeaseを指定した際はそちらが呼ばれるので、うまく使っていけると記述量が減ってよいかと思います。
イージングを指定しつつ計算された値を自前で使いたいとき
普通に使うと、いずれかのプロパティを指定して値を変更するかと思います。
でもちょっと特殊なことをしたかったり、計算で出た値を利用して何かしたかったりするときがあるかと思います。
※jQueryのanimateで言うところのstepを利用するような感じです
そんなときは↓のように利用することができます。
//propという要素を指定してあげることで、可能です。
//下の例だと0～1までの値が3秒かけて指定したeasingに応じて受け取ることができます。
TweenLite.to({ prop: 0 } , 3 , {prop:1 , onUpdate:function(tween) {
console.log(tween.target.prop);
} ,
onUpdateParams: [ "{self}" ]
});同じイージングを利用して、いろんな要素を操作したいときなんかに役立つのではないでしょうか。
jQueryのfadeIn/fadeOut的な動きをさせるautoAlpha
opacityを操作してフェード的な動きを実装したいときってけっこうあるのではないでしょうか。
普通にopacityを指定して操作してもよいのですが、jQueryのfadeIn/fadeOut的な指定も行うことができます。
TweenLite.to("#id" , 1 , {autoAlpha:0}); // 0～1を指定しますこれでほぼほぼjQueryのfade系と同じ動作を行ってくれます。
ただ、jQueryのfade系はアニメーション終了後、displayプロパティを操作するのに対して、TweenMaxはvisibilityプロパティを変更するという違いがあるので注意です。
アニメーション終了後特定のstyleを削除する
なんらかのアニメーション完了後、特定のstyle属性だけ削除したいってことが稀にありますよね。そんなときはclearPropsというパラメータを利用します。
TweenLite.to("#id" , 1 , {height:"500px" , width:"500px" , ease:Power1.easeOut , clearProps:"width"});例えばこんな指定をして、アニメーション終了後にwidthプロパティをstyle属性から削除してくれます。
全styleを削除したい場合は「all」を指定してあげればOKです。
TweenLite.to("#id" , 1 , {height:"500px" , width:"500px" , ease:Power1.easeOut , clearProps:"all"});特定の回数で要素を動かしたい
利用するとしたら主にスプライトを動かすときとかでしょうか。
指定した秒数で指定した回数にて要素のstyleを操作することもできます。
TweenLite.to("#move" , 10 , {ease: new SteppedEase(2), width: "500px"});上の記述だと10秒かけて2回にわけてwidthを500pxにします。
細かいネタですが、誰かのお役に立てれば幸いです。
よろしくお願いします。
【TweenMaxを使ってみるシリーズ】
※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1）
※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その2）
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
