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 よろしくね!

おわり