kute.js(2): コールバックとシーケンスアニメ

●callBack:コールバック

コールバックはdurationと同じoptionの{}内に設定する。completeはアニメ終了後に実行するfunctionを設定できます。

callback:アニメ後の処理を設定
http://jquerystudy.info/kute/0_core/16_cb_comp.html/
var tween = KUTE.fromTo('.box',{left:0},{left:500},
	{duration:500,complete:completeFunc});

animationFrame毎にコールするupdateの設定もあります。

callback:毎フレームごとの処理を設定
http://jquerystudy.info/kute/0_core/17_cb_update.html/
var tween = KUTE.fromTo('.box',{left:0},{left:500},
	{duration:500,update:updateFunc});

 

●chain:アニメの連結

アニメを連結するにはchainメソッドを利用すします。しかし以下ページで「chain multiple tweens」を検索して表示される機能が実現できません(私の解釈が間違っているのかな…)。
→参考:kute.js: Public Methods

chain:正常に機能しない…
http://jquerystudy.info/kute/0_core/18b_chain.html/
tween.chain(tween_2,tween_3,tween_4,tween_5);

そしてexampleのサンプルをみるとマニュアルと異なる構文で連結しています。
→参考:chain transform animations with kute.js
 
その構文を利用して連結してみた。引数に設定したtweenをオブジェクトとして次のtweenに繋いでいくのがポイント。

tween.chain(tween_2);
tween_2.chain(tween_3);
tween_3.chain(tween_4);
tween_4.chain(tween_5);

chainの別サンプル。1つの要素に対してアニメを連結した。

chain:いつの要素にシーケンシャルなアニメを
http://jquerystudy.info/kute/0_core/19_single.html/
var tween_1 = KUTE.to('.box',{left:500});
var tween_2 = KUTE.to('.box',{top :500});
var tween_3 = KUTE.to('.box',{left:0});
tween_1.chain(tween_2);
tween_2.chain(tween_3);

 

●both:アニメ連結とコールバック

chainした各アニメでコールバックが発生するか確認。アニメが切り替わる毎にdiv内の数値が変化します。この処理はjQueryよりもシンプルに記述できて嬉しい

連結したアニメ毎にコールバックを受け取る
http://jquerystudy.info/kute/0_core/20_cb_chain.html/
var tween_1 = KUTE.to('.box',{left:500},{complete:complete_1});
var tween_2 = KUTE.to('.box',{top :500},{complete:complete_2});
var tween_3 = KUTE.to('.box',{left:0  },{complete:complete_3});
tween_1.chain(tween_2);
tween_2.chain(tween_3);

 

●他のアニメライブラリを探そう…

突然ですがkute.jsの勉強は中断して、他のアニメライブラリを検討しようと思います。
ここまでの学習で躓いた箇所は3つ。
—————————————
・横スクロールに対応していない
・repeatDelayがyoyo以外で機能しない
・chain multiple tweensが機能しない
—————————————
上記に対しネットで情報収集したのですが英語サイトを含めても情報が少なく、技術系の掲示板でも議論がほとんどされていませんでした。とはいえ、新しいライブラリなので仕方ない部分なのでしょう…。 
 
もっと情報が充実してから再開しようと思います。
次回からはanime.jsを調査しようと思います。
 

●メリット

kute.jsの自習は中断となりましたがメリット的な機能をメモ。パースや基準点を変更した変形を手軽に出来るのがkute.jsのメリットだと思う。なので、それらを利用したデモがサイトトップで実演されている。とはいえ、それらはcss3の機能にもあるので他のライブラリでもできるよね?(追々調べてみよう)
→参考:MDN: perspective
→参考:MDN: perspective-origin
→参考:MDN: transform-origin
 

パースを設定したY軸回転
http://jquerystudy.info/kute/0_core/21_pers.html/
var tween = KUTE.fromTo('.box',{rotateY:0},{rotateY:180},{perspective:100});
var tween = KUTE.fromTo('.box',{rotate:0},{rotate:180},{transformOrigin:'100% 100%'});

 
おしまい
 

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の時にしか設定できないの?。というかネット上に情報が少ない(英語圏含めても)。紹介系のページは見つかるけれど、議論や実験的なページはかなりすくない(新しいライブラリというのもあるのだけど)。賑わっていない雰囲気
———————-
とりあえず、シーケンシャルな機能を確認してから判断しよう…