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%'});

 
おしまい
 

コメントを残す

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


九 + 6 =


*

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