Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

61,071 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よろしくね!おわり

×