anime.js(3):基礎的な利用2

●基礎的な利用2

 
アニメを最初から再生するrestartメソッドがあります。

restart:もう一度アニメを再生
http://jquerystudy.info/anime/0_core/12_restart.html/
document.getElementById("btn_restart").onclick = function (){
	animeObj.restart();
}

seekメソッドで引数に0を渡すことでリセットが可能です(kute.jsにはできなかった)。本来はアニメを指定した時間の状態にするメソッドです。seekで戻したアニメはresstartメソッドだけではなく、playメソッドでも再生できる。getSeekとかは無いみたい。
→参考:Seek

reset:seekを利用したリセット
http://jquerystudy.info/anime/0_core/13_seek.html/
document.getElementById("btn_reset").onclick = function (){
	animeObj.seek(0);
}

kute.jsのfromToの様に初期値を設定することもできる。特別なメソッドを使うのではなく配列で値を指定するだけです。[初期値,最終値]
→参考:From > To values

var animeObj = anime({targets:'.box',left:[100, 270],easing:'linear',autoplay:false});

アニメを再生しなくてもanimeオブジェクトを作成した段階で、要素は初期値の状態に設定されてしまう。これが嫌な場合はアニメを再生する直前にanimeオブジェクトを作るしかない。ただしseekメソッドでリセットしても最初に配置した場所ではなく、初期値の場所に配置されます。

document.getElementById("btn_play").onclick = function (){
	animeObj = anime({targets:'.box',left:[100, 270],easing:'linear',autoplay:false});
	animeObj.play();
}

イージングのelasticはelasticityオプションでバネ具合を調整できる。
→参考:Property parameters

anime({targets:'#b1',left:'270px',easing:'easeOutElastic',elasticity:   0,duration:1000,autoplay:false});
anime({targets:'#b2',left:'270px',easing:'easeOutElastic',elasticity: 500,duration:1000,autoplay:false});
anime({targets:'#b3',left:'270px',easing:'easeOutElastic',elasticity:1000,duration:1000,autoplay:false});

再生を遅らせる場合はdelayオプションを設定する。

delay:アニメの再生を遅らせる
http://jquerystudy.info/anime/0_core/16_delay.html/
var anime_2 = anime({targets:'#b2',left:270,delay:500,easing:'linear',autoplay:false});

複数の要素を順次送らせるためには値指定にfunctionを利用する。functionには要素とインデックス番号と総要素数が引数として送られるので、それを利用する。functionは様々な値設定に利用できます。
→参考:Function based property parameters
→参考:Function based values

function:関数を利用した値設定
http://jquerystudy.info/anime/0_core/17_function.html/
var animeObj = anime({targets:'.box',left:270,easing:'linear',autoplay:false,
	delay:function(elm,index, ln){
		return index * 500;
	}
});

再生方向はdirectionオプションを設定することで変えられます。

anime({targets:'.box',left:270,direction:'reverse',easing:'linear',autoplay:false});

directionオプションをalternateに設定すると往復再生ができます。往復で1再生ということに注意してください。

anime({targets:'.box',left:270,direction:'alternate',easing:'linear',autoplay:false});

loopオプションに数値を設定することで繰り返す回数を指定できます。

 anime({targets:'.box',left:270,easing:'linear',loop:2,autoplay:false});

loopオプションにtrueを設定すると無限ループになります。

anime({targets:'.box',left:270,easing:'linear',loop:true,autoplay:false});

directionをalternateに設定していても片道で1ループ扱いです。以下のサンプルではloopに5を設定しているので2往復半となります。

anime({targets:'.box',left:270,easing:'linear',direction:'alternate',loop:5,autoplay:false});

でもalternateのloopにdelayを設定すると往復したときにしかdelayが発生しない…

var animeObj = anime({targets:'.box',left:270,duration:200,delay:300,
		direction:'alternate',easing:'linear',loop:true,autoplay:false});

ループではなく2つのアニメを連結したら可能になりました。キーフレームについては次回に色々試したいと思います。
→参考:keyframes

var animeObj = anime({targets:'.box',
	left:[{value:270,duration:200,delay:1000},{value:0,duration:200,delay:1000}],
	easing:'linear',loop:true,autoplay:false});

 
相対的な値の設定についても今回学ぼうと思っていたのですが、躓いたので次回にします。
おしまい
 
 
 
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


6 − = 五


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>