5分でわかる enchant.js アニメーション機能

58,284 views

Published on

enchant.js でのプログラミングを劇的に簡単にする!
「enchant.js」のタイムラインベースのアニメーションについての解説です

2012/4/21: enchant.js meetup のLTで発表されました
2013/5/29: v0.6 以降の更新にあわせてアップデートしました。

Published in: Technology

5分でわかる enchant.js アニメーション機能

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

×