Upload
ryohei-fushimi
View
46.728
Download
4
Embed Size (px)
DESCRIPTION
enchant.js でのプログラミングを劇的に簡単にする! 「enchant.js」のタイムラインベースのアニメーションについての解説です 2012/4/21: enchant.js meetup のLTで発表されました 2013/5/29: v0.6 以降の更新にあわせてアップデートしました。
Citation preview
5分でわかるenchant.js アニメーション機能
@sidestepism
2013/05/29 v0.7 対応版更新
自己紹介
伏見 遼平
(株)ユビキタスエンターテイメント秋葉原リサーチセンター (UEI/ARC)9leap プロジェクトリーダー
たとえば「クマを移動させたい」
としたら…
bear.addEventListener(“enterframe”, function(){ bear.x ++;});
// -> 1フレームに1ピクセル移動する
動いた!
止まらない…
bear.addEventListener(“enterframe”, function(){ if(bear.x < 100)bear.x ++;});
// -> 100ピクセルだけ移動させる
今度は
止まった!
それでは…
それでは…
それでは…
こんな動きは?
animation.enchant.jsを使おう
animation.enchant.jsを使おう
animation.enchant.js
tl.enchant.js
enchant.js本体にmergeされました (v0.6 以降)
Node を継承したクラスのインスタンスでアニメーション機能が使えます
(Sprite, Label, Group, Scene など)
tl : TimeLine の略称あとで説明します
// (120, 120) に動かす
bear.moveTo(120, 120, 30);
// (120, 120) に1秒(30フレーム) で動かす
bear.tl.moveTo(120, 120, 30);
// (120, 120) に30フレームで動かしたあと// (60, 180) に30フレームで動かす
bear.tl.moveTo(120, 120, 30).moveTo(60, 180, 30);
// (120, 120) に30フレームで動かしたあと// (60, 180) に30フレームで動かしてから// (180, 90) に30フレームで動かす
bear.tl.moveTo(120, 120, 30) .moveTo(60, 180, 30) .moveTo(180, 90, 30);
moveTo(120, 120, 30)
moveTo(180, 90, 30)
moveTo(160, 30, 30)
キューが溜まっていく
イメージ
処理順
bear.tl.moveTo(120, 120, 30);bear.tl.moveBy(40, 40, 30);
// -> 絶対位置で (120, 120) へ移動// -> 相対位置で (+40, +40) へ移動
機能紹介その0
移動させるmoveTo/moveBy
bear.tl.fadeIn(30);
// -> 30フレームでフェードインする
機能紹介その1
フェードインfadeIn
bear.tl.delay(30).scaleTo(3, 30);
// -> クマを30フレーム後に画面から消す
機能紹介その2
大きさを変更するscaleTo/scaleBy
bear.tl.delay(30).fadeIn(30);
// -> 30フレーム後、30フレームでフェードインする
機能紹介その3
指定した時間だけ待つdelay
bear.tl.delay(30).then(function(){ scene.removeChild(bear);});
// -> クマを30フレーム後に画面から消す
機能紹介その4
関数を実行するthen
bear.tl.cue({ 10: function(){ ... }, 20: function(){ ... }, 30: function(){ ... }, 50: function(){ ... }});
機能紹介その5
たくさん関数を実行するcue
bear.tl.tween({ x: 120, y: 120, scaleX: 3, scaleY: 3, time: 100 }));
機能紹介その6
トゥイーンを追加するtween
bear.tl.fadeIn(30).moveTo(120, 120, 30)// -> フェードインしてから移動
bear.tl.fadeIn(30).and().moveTo(120, 120, 30)// -> 同時に実行!
機能紹介その7
並列実行and
bear.tl.fadeIn(30).fadeIn(30).loop();// -> フェードイン・アウトを繰り返す
機能紹介その8
ループloop
bear.tl.skip(100);
// -> 100フレーム分早送り
機能紹介その9
指定したフレームだけ早送りskip
機能紹介その10
関数を繰り返し実行repeat
機能紹介その11
キューを一時停止/再開pause / resume
機能紹介その12
キューをすべて消去clear
機能紹介その13
処理を待ってから次へwaitUntil
機能紹介その14
自分でアクションを定義action
機能紹介その15
シーンから削除removeFromScene
忘れちゃいけない
イージング
「ふわっ」とした動き
これがイージング!!
// イージング (ふわっと動かす)
bear.tl.moveTo(120, 120, 30, enchant.Easing.QUAD_EASEINOUT);
bear.tl.tween({ x: 120, y: 120, scaleX: 3, scaleY: 3, time: 100, easing: enchant.Easing.QUAD_EASEINOUT }));
関数を指定
enchant.Easing.
QUAD_QUBIC_QUINT_SIN_BACK_CIRC_ELASTIC_BOUNCE_EXPO_
+EASEINEASEOUTEASEINOUT
プリセットのイージング関数いろんな「ふわっと具合」から選べます
「Tweener Transition Sample」などで検索
アニメーションを表現したりタイマーを作ったり
…いろんなことに使えます
Already Available on github
enchant.js よろしくね!
おわり