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

●基礎的な利用

 
anime.jsはアニメを設定した瞬間に再生されてしまいます。もし勝手に再生したくないときはautoplayオプションをfalseにしておきます。再生はplayメソッドを利用します。kute.jsと異なりオプション用の{}は無くプロパティと同じ場所に設定します。

autoplay:ボタンを押してから再生
http://jquerystudy.info/anime/0_core/00_intro.html/
var animeObj = anime({targets:'.box',left:	'500px', autoplay:false});
document.getElementById("btn_start").onclick = function (){
	animeObj.play();
}

anime.jsはイージングのデフォルトがlinearではない珍しいライブラリです。以下サンプルではlinearを設定しました。他に利用できるイージングはここを参照してください。
 
Elasticなものに関してはパラメータを設定できます(後日サンプルを作る予定)。またベジェ式を利用したカスタムイージングも作成でき、かなり高機能な印象。
→参考:Easing functions

var animeObj = anime({targets:'.box',left:'500px',easing:'linear',autoplay:false});

複数要素に対応しています(kute.jsとことなりメソッドが変わるようなことはありません)。

複数要素をまとめてアニメ
http://jquerystudy.info/anime/0_core/03_multi.html/
<div id="b1" class="box">1</div>
<div id="b2" class="box">2</div>
<div id="b3" class="box">3</div>
<div id="b4" class="box">4</div>
<div id="b5" class="box">5</div>
var animeObj = anime({targets:'.box',left:'500px',easing:'linear',autoplay:false});

 
複数のプロパティを同時にアニメできます。

var animeObj = anime({
	targets:'.box',
	top:'500px',
	left:'500px',
	rotate:'180',
	easing:'linear',
	autoplay:false
});

プロパティ毎に詳細を設定したい場合はプロパティ毎に{}を設定します。共通で参照する値は通常の位置に書きます(今回の例ではautoplayが共通)。

var animeObj = anime({
	targets:'.box',
	top:{
		value:'500px',
		easing:'linear',
		duration:500
	},
	left:{
		value:'500px',
		easing:'easeInOutSine',
		duration:1000
	},
	autoplay:false
});

targetsは個別には設定できないようなので、以下のように別々に設定しよう。

ターゲット毎に異なるアニメを設定
http://jquerystudy.info/anime/0_core/06_openDoor.html/
var leftObj = anime({targets:'#doorLeft',width:'0px'
	,easing:'linear',duration:1000,autoplay:false});
var rightObj = anime({targets:'#doorRight',width:'0px',left:'320px'
	,easing:'linear',duration:1000,autoplay:false});

ターゲットを配列で指定することができます。

ターゲットを配列で指定
http://jquerystudy.info/anime/0_core/07_array.html/
var animeObj = anime({targets:['#b1','#b3','#b5'],left:'500px',easing:'linear',autoplay:false});

DOM要素の属性値も変更できます。サンプルではinputのvalue属性を変更しています(roundは小数点の設定)。

inputタグのvalue値を操作
http://jquerystudy.info/anime/0_core/08_dom.html/
var animeObj = anime({targets:'input',value:100,round: 1,
	easing:'linear',duration:3000,autoplay:false});

属性が変更できるということは横スクロールも可能ということ。

var animeObj = anime({targets:scrollElm,scrollLeft:5000,easing:'linear',autoplay:false});

サンプルは作成しませんでしたがobjectデータの値も変更できます。
※他の項目と組み合わせてサンプルを作る予定。
→参考:JavaScript Object properties

色の指定方法は3種類(hex/rgb/hsl)ある

var color_1 = anime({targets:'#b1',backgroundColor:'#FFF',easing:'linear',autoplay:false});
var color_2 = anime({targets:'#b2',backgroundColor:'rgb(255,255,255)',easing:'linear',autoplay:false});
var color_3 = anime({targets:'#b3',backgroundColor:'hsl(0, 0%,100%)',easing:'linear',autoplay:false});

hslがあるのできれいな色環アニメができると思ったけど、少し直線的な雰囲気。

hslを利用した色環アニメ
http://jquerystudy.info/anime/0_core/11_circle.html/

 
次回に続く。
 
 
 

 
 
 

コメントを残す

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


7 + = 十三


*

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