tweenによるアニメーション

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

Transcript

1. UXFFOʹΑΔΞχϝʔγϣϯ 
   ஛಺ɹ༎հ
2. ࣗݾ঺հ ஛಺ɹ༎հ
   ϓϩάϥϚʔ
   +4େ޷͖
   UISFFKTͷήʔϜΛ
 झຯͰ࡞ͬͯ·͢
3. αϯϓϧίʔυ σϞͰ࢖͏ίʔυ͸HJUIVCʹΞοϓ͠·ͨ͠
   DISPNFͰಈ࡞֬ೝΛ͍ͯ͠·͢
   IUUQTHJUIVCDPNLBJEPVKJUXFFO BOJNBUJPO
4. ΞδΣϯμ  UXFFOͱ͸
    UXFFO
   WT
   ϒϥ΢βඪ४
    UXFFOͱ'14
    ·ͱΊ
5. ΞδΣϯμ  UXFFOͱ͸
    UXFFO
   WT
   ϒϥ΢βඪ४
    UXFFOͱ'14
    ·ͱΊ
6. UXFFOͱ͸ ΩʔϑϨʔϜΛઃఆͯ͠ΞχϝʔγϣϯΛ
 දݱ͢Δ
   Ξχϝʔγϣϯͤ͞Δͷ͸ɺ
 +BWB4DSJQUΦϒδΣΫτ
   ݱঢ়ɺϒϥ΢βωΠςΟϒ࣮૷͸ଘࡏ͠ͳ͍
7. UXFFOͷσϞ αϯϓϧίʔυ<TBNQMFUXFFO>
8. ղઆ ໿'14Ͱը໘Λॻ͖௚͍ͯ͠Δ
   ࠲ඪͷม਺Λܦա࣌ؒʹԠͨ͡஋ʹ
 ηοτ͍ͯ͠Δ
   UXFFOϥΠϒϥϦ͸UXFFOKTΛ࢖༻
9. UXFFOͷجຊ֓೦ ඵؒͰQYਐΉUXFFO QY ඵ QY ඵ ඵඵ
   9
   QY Ҡಈ͕ऴྃͨ࣌ؒ͠
10. UXFFOϥΠϒϥϦͷྫ HBTQ (SFFO
    4PDL
    "OJNBUJPO
    1MBUGPSN
    UXFFOKT
    WFMPDJUZKT
11. ΞδΣϯμ  UXFFOͱ͸
     UXFFO
    WT
    ϒϥ΢βඪ४
     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ͱ͸
     UXFFO
    WT
    ϒϥ΢βඪ४
     UXFFOͱ'14
     ·ͱΊ
20. '14ͱ͸ 'SBNFT
    1FS
    4FDPOEͷུ
    ඵؒʹԿճը໘Λ࠶ඳը͢Δ͔ͱ͍͏ҙຯ
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ͱ͸
     UXFFO
    WT
    ϒϥ΢βඪ४
     UXFFOͱ'14
     ·ͱΊ
31. ࠓ೔ͷ·ͱΊ UXFFO͸Ξχϝʔγϣϯͷٕज़
    DBOWBTɺ8FC(-Ξχϝʹ͸UXFFOΛ࢖͓͏
    SFRVFTU"OJNBUJPO'SBNFͷΞχϝͰ΋UXFFO Λ࢖͓͏
32. ͝੩ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠