kute.js(1):基礎的なアニメ

●Core:基礎的な使い方

以下のサイトが参考になりました。
→参考:CSS,SVG,テキスト要素に様々なアニメーションを低負荷で施せる「KUTE.js」
 
toメソッドを利用すると指定した値にアニメします。返値はtweenオブジェクトと呼ばれる。

to:ボタンを押すと透明に
http://jquerystudy.info/kute/0_core/02_simple.html/
var tween = KUTE.to('.box',{opacity:0},{duration:1500});
document.getElementById("btn").onclick = function (){
	tween.start();
}

toメソッドは複数要素に対応していない。

to:2つめのboxは消えません…
http://jquerystudy.info/kute/0_core/03_allto.html/
<div id="testArea">
	<div id="b1" class="box">box 1</div>
	<div id="b2" class="box">box 2</div>
</div>

複数の要素をアニメさせる場合はallToメソッドを利用する

allTo:複数の要素はallToを使う
http://jquerystudy.info/kute/0_core/04_allto2.html/
var testAnime = KUTE.allTo('.box',{opacity:0},{duration:1500});
document.getElementById("btn").onclick = function (){
	testAnime.start();
}

イージングの設定(公式サイト:イージングの種類
ちなみにアニメを初期状態に戻すメソッドはない。そのため下記サンプルのresetボタンはjavaScriptで位置を設定しなおしています。

 
fromToメソッドを利用すると初期値も設定できるのでresetボタンは不要になります。

fromTo:アニメの初期値も設定する
http://jquerystudy.info/kute/0_core/06_fromTo.html/
var tween_1 = KUTE.fromTo('#b1',{left:0},{left:500},{duration:1500, easing:'linear'});

複数の要素に対応したallFromToメソッドもあります。

allFromTo:複数要素でアニメの初期値も設定する
http://jquerystudy.info/kute/0_core/07_allFromTo.html/
var tween = KUTE.allFromTo('.box',{left:0},{left:500},{duration:1500});

複数要素をずらして再生したいときはoffsetオプションが便利

offset:複数要素をずらして再生
http://jquerystudy.info/kute/0_core/08_offset.html/
var tween = KUTE.allFromTo('.box',{left:0},{left:500},{duration:500, offset:100});

個別にアニメをずらす場合はdelayオプションを使います。

var tween_1 = KUTE.fromTo('#b1',{left:0},{left:500},{duration:1500,delay:0});
var tween_2 = KUTE.fromTo('#b2',{left:0},{left:500},{duration:1500,delay:400});
var tween_3 = KUTE.fromTo('#b3',{left:0},{left:500},{duration:1500,delay:800});
var tween_4 = KUTE.fromTo('#b4',{left:0},{left:500},{duration:1500,delay:600});
var tween_5 = KUTE.fromTo('#b5',{left:0},{left:500},{duration:1500,delay:200});

繰り返しアニメさせたいときはrepeatオプションを使う。繰り返し数なので1を指定すると元のアニメと合わせて計2回となります。

var tween = KUTE.allFromTo('.box',{left:0},{left:500},{duration:500, repeat:1});

ver1.6から無限ループ(Infinity)が設定できるようになりました。

var tween = KUTE.allFromTo('.box',{left:0},{left:500},{duration:500, repeat:Infinity});

repeatDelayオプションを設定すると繰り返し間隔を設定できるはずなのに機能しない…

repeatDelay:繰り返し間隔を設定する(機能しない…)
http://jquerystudy.info/kute/0_core/12_repeat_delay.html/
var tween = KUTE.allFromTo('.box',{left:0},{left:500},
	{duration:500, repeat:10,repeatDelay:500});

yoyoオプションをtrueにすると反復繰り返しになります

var tween = KUTE.allFromTo('.box',{left:0},{left:500},
	{duration:500, repeat:Infinity, yoyo:true});

yoyoオプションをtrueにするとrepeatDelayが効くようになった…

yoyo & repeatDelay:往復の間隔を設定
http://jquerystudy.info/kute/0_core/14_yoyo_delay.html/
var tween = KUTE.allFromTo('.box',{left:0},{left:500},
	{duration:500, repeat:Infinity, yoyo:true, repeatDelay:1000});

複数プロパティのアニメさせることも可能。

multi:複数のプロパティをまとめてアニメ
http://jquerystudy.info/kute/0_core/15_multi.html/
var tween = KUTE.allFromTo('.box',{left:0, top:0, rotate:0},
	{left:500, top:500, rotate:360},{duration:500, repeat:Infinity, yoyo:true});

 

●人気がない?

なんとなくkute.jsを採用するのは危険な気がしてきた…。
———————-
前回の記事で横スクロールに対応していないと書いたが、こういう演出系のライブラリってcssやhtmlの属性/プロパティを直接操作できるものが多いので、scrollLeftとかを操作すれば横スクロールできそうなのに、それができない。
 
単一要素と複数要素で利用するメソッドが異なる(fromTo/allFromTo)。分けた方が高速に処理できるのだろうけれど、少し違和感。
 
repeatDelayってyoyoの時にしか設定できないの?。というかネット上に情報が少ない(英語圏含めても)。紹介系のページは見つかるけれど、議論や実験的なページはかなりすくない(新しいライブラリというのもあるのだけど)。賑わっていない雰囲気
———————-
とりあえず、シーケンシャルな機能を確認してから判断しよう…