Upgrade to Pro — share decks privately, control downloads, hide ads and more …

tweenによるアニメーション

E63c0cf4a77b1799e02f97689db83d91?s=47 kaidouji85
September 26, 2018

 tweenによるアニメーション

JSer.info 400回記念イベント発表スライドです。

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

September 26, 2018
Tweet

More Decks by kaidouji85

Other Decks in Technology

Transcript

  1. UXFFOʹΑΔΞχϝʔγϣϯ  ஛಺ɹ༎հ

  2. ࣗݾ঺հ ஛಺ɹ༎հ ϓϩάϥϚʔ +4େ޷͖ UISFFKTͷήʔϜΛ
 झຯͰ࡞ͬͯ·͢

  3. αϯϓϧίʔυ σϞͰ࢖͏ίʔυ͸HJUIVCʹΞοϓ͠·ͨ͠ DISPNFͰಈ࡞֬ೝΛ͍ͯ͠·͢ IUUQTHJUIVCDPNLBJEPVKJUXFFO BOJNBUJPO

  4. ΞδΣϯμ  UXFFOͱ͸  UXFFOWTϒϥ΢βඪ४  UXFFOͱ'14  ·ͱΊ

  5. ΞδΣϯμ  UXFFOͱ͸  UXFFOWTϒϥ΢βඪ४  UXFFOͱ'14  ·ͱΊ

  6. UXFFOͱ͸ ΩʔϑϨʔϜΛઃఆͯ͠ΞχϝʔγϣϯΛ
 දݱ͢Δ Ξχϝʔγϣϯͤ͞Δͷ͸ɺ
 +BWB4DSJQUΦϒδΣΫτ ݱঢ়ɺϒϥ΢βωΠςΟϒ࣮૷͸ଘࡏ͠ͳ͍

  7. UXFFOͷσϞ αϯϓϧίʔυ<TBNQMFUXFFO>

  8. ղઆ ໿'14Ͱը໘Λॻ͖௚͍ͯ͠Δ ࠲ඪͷม਺Λܦա࣌ؒʹԠͨ͡஋ʹ
 ηοτ͍ͯ͠Δ UXFFOϥΠϒϥϦ͸UXFFOKTΛ࢖༻

  9. UXFFOͷجຊ֓೦ ඵؒͰQYਐΉUXFFO QY ඵ QY ඵ ඵඵ9QY Ҡಈ͕ऴྃͨ࣌ؒ͠

  10. UXFFOϥΠϒϥϦͷྫ HBTQ (SFFO4PDL"OJNBUJPO1MBUGPSN  UXFFOKT WFMPDJUZKT

  11. ΞδΣϯμ  UXFFOͱ͸  UXFFOWTϒϥ΢βඪ४  UXFFOͱ'14  ·ͱΊ

  12. Ξχϝͷϒϥ΢βඪ४ DTT DTTτϥϯδγϣϯ DTTΞχϝʔγϣϯ 8FC"OJNBUJPO"1*

  13. 8FC"OJNBUJPO"1*ิ଍ $44ΞχϝʔγϣϯΛ+4͔ΒͰ΋
 ࢖͑ΔΑ͏ʹͨ͠΋ͷ ΞχϝʔγϣϯΛνΣΠϯͤ͞ΔͳͲɺ
 $44Ͱ೉͔ͬͨ͜͠ͱ͕؆୯ʹͰ͖Δ 5$ϓϩϙʔαϧ͸4UBHF

  14. 8FC"OJNBUJPO"1*σϞ αϯϓϧίʔυ<TBNQMFXFCBOJNBUJPOBQJ>

  15. Ξχϝʔγϣϯػೳൺֱ λΠϜϥΠϯ Πϕϯτ νΣΠϯ DTT ˓ ˓ ˚ XFC BOJNBUJPO

    BQJ ˓ ˓ ˓ UXFFO ˓ ˓ ˓
  16. ࢖͑Δ৔ॴͷൺֱ IUNMཁૉ DBOWBT Ξχϝ 8FC(- Ξχϝ DTT ˓ XFC BOJNBUJPO

    BQJ ˓ UXFFO ˓ ˓ ˓
  17. DBOWBTɺ8FC(-ิ଍ DBOWBTɺ8FC(-͸ཁૉ಺Λॻ͖׵͑Δٕज़ ͳͷͰɺελΠϧͷద༻ൣғ֎ ը૾ͷ಺༰ΛελΠϧͰมߋͰ͖ͳ͍ͷͱಉ͡

  18. UXFFOɺϒϥ΢βඪ४·ͱΊ DBOWBTɺ8FC(-ͷΞχϝʔγϣϯ͕Ͱ͖Δ
 ͷ͸UXFFO͚ͩ )5.-ཁૉͷΞχϝʔγϣϯͰ͸ɺ
 ঢ়گʹԠͯ͡޷͖ͳ΋ͷΛ࢖͑͹͍͍

  19. ΞδΣϯμ  UXFFOͱ͸  UXFFOWTϒϥ΢βඪ४  UXFFOͱ'14  ·ͱΊ

  20. '14ͱ͸ 'SBNFT1FS4FDPOEͷུ ඵؒʹԿճը໘Λ࠶ඳը͢Δ͔ͱ͍͏ҙຯ

  21. UXFFͷ'14 UXFFOࣗମ͸'14Λ࣋ͨͳ͍ UXFFOΛݺͼग़͍ͯ͠Δɺը໘࠶ඳըϧʔϓͷ '14ʹґଘ͍ͯ͠Δ

  22. SFRVFTU"OJNBUJPO'SBNFͷ'14 SFRVFTU"OJNBUJPO'SBNFͷ'14͸ҰఆͰ͋Δ ͜ͱ͕อূ͞Ε͍ͯͳ͍ ௨ৗ͸'1͕ͩɺঢ়گʹΑΓ'14ҎԼ
 ʹͳΔ͜ͱ͕͋Δ

  23. UXFFOΛ࢖Θͳ͍Ξχϝ UXFFOΛ࢖ΘͣʹɺSFRVFTU"OJNBUJPO'SBNF ͚ͩͰΞχϝʔγϣϯ͢Δ͜ͱ΋Մೳ Α͘ݟΔ΍Γํ͕ͩɺݸਓతʹ͸
 Ξϯνύλʔϯͩͱࢥ͏ const gameLoop = time =>

    { requestAnimationFrame(gameLoop); pos.x += 4; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(image, pos.x, pos.y); }; requestAnimationFrame(gameLoop);
  24. ΞϯνύλʔϯͷσϞ αϯϓϧίʔυ<TBNQMFBOUJQBUUFSO>

  25. Ξϯνύλʔϯͷཧ༝ '14ͷมߋʹऑ͍ දݱྗ͕௿͍

  26.    ඵ ඵ ̎ඵ ̍ϑϨʔϜ͝ͱʹ ͢Δ 9 9

    ࣌ؒ ࣌ؒ 9 9 9 '14 '14
  27.    ඵ ඵ ̎ඵ 5XFFO ඵͰҠಈ 9 9

    ࣌ؒ ࣌ؒ 9 9 9 '14 '14
  28. දݱྗ͕௿͍ཧ༝ UXFFOΛ࢖Θͳ͍Ͱɺ࢛֯ܗʹҠಈͤ͞Δ
 ϩδοΫΛߟ͑Δ JGɺTXJUDIɺঢ়ଶม਺ͩΒ͚ʹͳͬͯ
 ෳࡶʹͳΔ

  29. ݁࿦ UXFFOʹ'14͸ͳ͍ SFRVFTU"OJNBUJPO'SBNFͷΞχϝʔγϣϯ
 Ͱ͸ඞͣUXFFOΛ࢖͓͏

  30. ΞδΣϯμ  UXFFOͱ͸  UXFFOWTϒϥ΢βඪ४  UXFFOͱ'14  ·ͱΊ

  31. ࠓ೔ͷ·ͱΊ UXFFO͸Ξχϝʔγϣϯͷٕज़ DBOWBTɺ8FC(-Ξχϝʹ͸UXFFOΛ࢖͓͏ SFRVFTU"OJNBUJPO'SBNFͷΞχϝͰ΋UXFFO Λ࢖͓͏

  32. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠