基本となるアニメーションです
※それぞれ1回しかアニメーションされません。（移動(+=指定)を除く）
ボタンを押したときに処理は実行はされているのですが、移動しきった後に初期値の設定をしていないためです。
top,right,bottom,leftで指定すると指定した要素がその値まで移動します。
TweenMax.to('#demo1Anim', 1, {left: '200px'});
x値で指定すると、transformを用いて移動します。おそらくこちらのほうが速いです。
TweenMax.to('#demo1-2Anim', 1, {x: 200});
値を+=で指定すると現在地かその値分移動します。jqueryと同じですね。
TweenMax.to('#demo1-3Anim', 1, {left: '+=50px'});
背景色も変更できます。
background、background-colorなどの指定では動かないので注意が必要です。
background-colorに関してはjs内で使うと-が式として扱われてしまうためエラーになります。このような場合は、-を省略して次につづく文字を大文字にするといいです。
例）margin-left → marginLeft
TweenMax.to('#demo1-4Anim', 1, {
left: '200px',
backgroundColor: '#00ff00'
});
透明度も変更できます。
TweenMax.to('#demo1-5Anim', 1, {
left: '200px',
opacity: '0.3'
});
回転だって超楽ちんです。※ただし、回転はIE8だとうまくいかないです。あきらめましょう。
このほかにも数字で指定されているものであれば、大抵アニメーションできるので試してみてください。
TweenMax.to('#demo1-6Anim', 1, {
left: '200px',
rotation: 180
});
あれもやりたい、これもやりたいと、たくさんの指定を行う時は、css:{}を使用してCSS系の記述を明示的にまとめると、分かりやすくなると思います。
TweenMax.to('#demo1-7Anim', 1, {
css: {
left: '200px',
backgroundColor: '#0000ff',
opacity: 0.3,
rotation: 360
}
});
pauseでアニメーションを停止、playで停止したアニメーションを動かすことができます。
pauseもplayも、変数に格納したTweenMaxオブジェクトに対して行います。
※それぞれ1回しかアニメーションされません。
ボタンを押したときに処理は実行はされているのですが、移動しきった後に初期値の設定をしていないためです。
pause()を使用するとアニメーションがその場で停止します。
var anim;
$('実行ボタンセレクタ').on('click', function(){
//if(anim)とやらないと、animにTweenmaxオブジェクトが格納されてない状態だとエラーになってしまうので注意
if(anim){
//Tweenmaxオブジェクトが格納されたanim変数にplayを指定する
anim.play();
} else{
//anim変数にTweenmaxオブジェクトを格納。
anim = TweenMax.to('#demo2Anim', 2, {
left: 400
});
}
});
$('停止ボタンセレクタ').on('click', function(){
//if(anim)とやらないと、animにTweenmaxオブジェクトが格納されてない状態だとエラーになってしまうので注意
if(anim){
//Tweenmaxオブジェクトが格納されたanim変数にpauseを指定する
anim.pause();
}
});
pause(数値)と()内に数値を指定すると、指定した数値箇所に停止します。
数値はtoの第二引数に指定した秒数を最終位置として計算されます。
例だと2が最終位置なので、1秒後の位置に停止したいのであれば1、最終位置に指定したければ2を指定します。
ちなみに、play()にも数値を指定することができます。指定すると、指定秒目からアニメーションが実行されます。
var anim;
$('実行ボタンセレクタ').on('click', function(){
if(anim){
anim.play();
} else{
anim = TweenMax.to('#demo2-2Anim', 2, {
left: 400
});
}
});
$('1秒後に停止ボタンセレクタ').on('click', function(){
if(anim){
//()内に数値を指定する。下記だと1秒地点に停止する。
anim.pause(1);
}
});
$('最終位置に停止ボタンセレクタ').on('click', function(){
if(anim){
//TweenMaxオブジェクトで定義した秒数を指定すると最終位置に停止する
anim.pause(2);
}
});
startAtでアニメーションの開始位置を定義すると、アニメーションが終わっていても再実行することが可能です。
TweenMax.to('#demo3Anim', 1, {
left: '200px',
startAt : {left: 0}
});
デモ2で使用したplayを応用して行うことも可能です。
play(0)とすると、0秒目の位置からアニメーションをすることになるので、アニメーションを何度も実行することが可能です。
var anim;
//if(anim)とやらないと、animにTweenmaxオブジェクトが格納されてない状態だとエラーになってしまうので注意
if(anim){
//Tweenmaxオブジェクトが格納されたanim変数にplay(0)を指定する
anim.play(0);
} else{
//anim変数にTweenmaxオブジェクトを格納。
anim = TweenMax.to('#demo3-2Anim', 1, {
left: '200px'
});
}
restart()を使用して行うことも可能です。
play(0)とのに違いは、TweenMaxオブジェクトにdelay（遅延）の指定がしてある場合、restart(true)とすると再実行の際もdelayが効くようになります。
もう一つ使い方ありますが、ちょっと省きますね。。。
delayの説明はデモ5で・・・
var anim;
if(anim){
anim.restart();
} else{
anim = TweenMax.to('#demo3-3Anim', 1, {
left: '200px'
});
}
repeatを指定するとアニメーションを繰り返します
回数を指定することにより、指定した回数分繰り返されます。
繰り返しの回数なので、3と指定すると3回繰り返され、アニメーションは4回実行されます。
TweenMax.to('#demo4Anim', 1, {
left: '200px',
repeat: 3
});
回数に-1を指定すると、無限に繰り返されます。
TweenMax.to('#demo4-2Anim', 1, {
left: '200px',
repeat: -1
});
repeatと共にyoyoにtrueを指定すると、行って帰ってくるアニメーションになります。
返ってくる動作でも繰り返し回数がカウントされます。
yoyoをtrueにしても、repeatが指定されていなければ動かないので注意が必要です。
TweenMax.to('#demo4-3Anim', 1, {
left: '200px',
repeat: 5,
yoyo: true
});
repeat、yoyoはTweenMaxオブジェクトのメソッドで設定する事も可能です。
外から色々できるってのはポイント高いですね。
//anim変数にTweenmaxオブジェクトを格納。
var anim = TweenMax.to('#demo4-3Anim', 1, {
left: '200px'
});
//repeatとyoyoをセット
anim.repeat(5);
anim.yoyo(true);
delayを指定すると、指定秒数アニメーションの実行が遅延します。
TweenMax.to('#demo5Anim', 1, {
left: '200px',
//0.5秒アニメーションの実行を遅延させる
delay: 0.5
});
delayはTweenMaxオブジェクトのメソッドで設定する事も可能です。
var anim = TweenMax.to('#demo5-2Anim', 1, {left: '200px'});
anim.delay(0.5);
easeを指定すると、アニメーションのイージング具合を指定できます。
デフォルトはQuad.easeOutになってるらしいです。
イージングは種類が多すぎてとてもじゃないですが紹介できないので、オフィシャルを見てくださいませ。
TweenMax.to('#demo6Anim', 2, {
left: 400,
ease: Bounce.easeInOut
});
TweenMaxにはアニメーション実行時の様々なタイミングでのコールバックが用意されています。素敵ですね。
使用頻度が高そうなものだけ紹介しておきますね。
onComplete:function(){処理}の指定で、アニメーションが完了したタイミングで処理が実行されます。
TweenMax.to('#demo7Anim', 1, {
left: '200px',
onComplete: function(){
alert('アニメーション終わり！');
}
});
デモ3のpauseを使用すれば、アニメーションが終了したタイミングで、初期位置に戻すことも可能です。
TweenMax.to('#demo7-1-1Anim', 1, {
left: '200px',
onComplete: function(){
alert('アニメーション終わり！');
this.pause(0); //ここのthisはこのTweenmaxオブジェクトをさします。
}
});
functionは外に定義して呼び出すことも可能です
//functionを外におくため、anim変数にTweenMaxオブジェクトを格納する必要がある
var anim = TweenMax.to('#demo7-1-3Anim', 1, {
left: '200px',
onComplete: func7_1_3
});
function func7_1_3(){
alert('アニメーション終わり！');
//外に出したため、thisだと無理です。
anim.pause(0);
}
onStart:function(){処理}の指定で、アニメーションが開始したタイミングで処理が実行されます。
TweenMax.to('#demo7-2Anim', 1, {
left: '200px',
onStart: function(){
alert('アニメーション開始！');
}
});
onUpdate:function(){処理}の指定で、アニメーションが実行される間中、処理が実行されます。
TweenMax.to('#demo7-3Anim', 2, {
left: '200px',
onUpdate : function(){
console.log('hoge');
}
});
progress()で変化値を取得（アニメーション開始時が0で終了時が1）できるので、合わせ技で現在のleft値を算出もできます。
※$('#demo7-3-2Anim').css('left')でも取得できますが、まぁprogressってのを紹介しておきたかっただけです・・・・
TweenMax.to('#demo7-3-2Anim', 2, {
left: '200px',
onUpdate : function(){
var progress = this.progress();
progress = Math.ceil(progress * 200);
$('#demo7-3-2Txt').text('現在のleft値は' + progress + 'です')
}
});
オブジェクトの値の監視にも使えます。その場合onUpdateParamsを使用して、以下のように書きます。
//TweenMaxで監視するオブジェクト
var obj = {value: 100};
var anim = TweenMax.to(obj, 2, {
value: 500,
onUpdate : function(tw){
//onUpdateに渡ってくる引数のtargetにオブジェクトが渡されてきます。
var value = tw.target.value;
$('#demo7-3-3Txt').text('{value:' + value + '}');
},
//onUpdateParamsには['{self}']を指定します。
onUpdateParams: ['{self}']
});
onRepeat:function(){処理}の指定で、リピートされた時に処理が実行されます。
var count = 1;
TweenMax.to('#demo7-4Anim', 2, {
left: '200px',
repeat: 10,
yoyo: true,
onRepeat : function(){
$('#demo7-4Txt').text('リピート' + count + '回目');
count++;
}
});
TweenMax.staggerToを使うと、配列で渡された複数の要素に対して、時間差でアニメーションをさせることができます。
書き方はtoとほぼ一緒で、最後に一つ値を追加するだけです。その値がアニメーションをさせる時間差の数値になります。
//複数回さないと意味ないのでclassで指定します
TweenMax.staggerTo('.demo8Anim', 1,
{
top: '50px',
opacity: 0
},
//↑まではtoと同じ記法で、↓にアニメーションの時間差を指定します。
0.2
);
指定のしかたはtoと同じなので、repeat等も問題なく使えます。
TweenMax.staggerTo('.demo8-2Anim', 1,
{
top: '50px',
opacity: 0,
repeat: -1,
yoyo: true,
},
0.2
);
アニメーションの連結にはTimelineMaxを使用します。
TimelineMaxはnew TimelineMax() で呼び出します。
あとはそれにたいしてtoでつなげていくと、順番にアニメーションが実行されます。toの使い方は替わりません。
//TimelineMaxの呼び出し
var timeLine = new TimelineMax();
//アニメーションさせるアイテム
var elm = $('#demo9Anim');
//toを一行で書くと可読性が落ちるため、以下のように一つのtoごとでの改行がおすすめです
timeLine.to(elm, 1, {left: '200px'})
.to(elm, 1, {top: '210px'})
.to(elm, 1, {left: '10px'})
.to(elm, 1, {top: '10px'});
TimelineMaxオブジェクトを変数に格納して、addを使用して、アニメーションを追加することも可能です。
なかなか便利ですね。
var timeLine = new TimelineMax();
var elm = $('#demo9-2Anim');
var tl = timeLine.to(elm, 1, {left: '200px'});
//アニメーションの追加
tl.add(TweenMax.to(elm, 1, {top: '210px'}));
tl.add(TweenMax.to(elm, 1, {left: '10px'}));
tl.add(TweenMax.to(elm, 1, {top: '10px'}));
new TimelineMaxを呼び出す時に、repeatの指定をすると、一連のアニメーションがrepeatされます。
repeat以外にも、デモ1～7で紹介している他の機能も大体使えます。
指定の仕方も変わりませんので、例えば下の例でいくと、timeLine.repeat(1)といった書き方もできます。
//ここのタイミングでrepeatを指定。
var timeLine = new TimelineMax({repeat:1});
var elm = $('#demo9-3Anim');
var tl = timeLine.to(elm, 1, {left: '200px'});
tl.add(TweenMax.to(elm, 1, {top: '210px'}));
tl.add(TweenMax.to(elm, 1, {left: '10px'}));
tl.add(TweenMax.to(elm, 1, {top: '10px'}));