JSでアニメーションに入門したい

2018/10/24 We are JavaScripters!@25th にて発表した資料です( ˘ω˘)
https://wajs.connpass.com/event/103761/

Transcript

1. !BUTVDP@ +4ͰΞχϝʔγϣϯʹೖ໳͍ͨ͠ 
   8F
   "SF
   +BWB4DSJQUFST
2. ΞαΦΧΞπί
   !BUTVDP@ ϑϦʔϥϯε
   ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
   ೣ೿ͷ؁ౘɺң͕௧͍ܥ8FC԰ ʙɹ8F+4ӡӦ
3. Ξχϝʔγϣϯͱ͸ʁ ✦ ࣌ؒܦաʹ൐͍ɺ͋Δ஋ΛʙͷؒͰมԽͤ͞Δ
   ✦ ࢝఺ɾมԽྔɾ࣌ؒʹΑͬͯදݱ͞ΕΔ
   ✦ ը૾Λ 
    ͷ஍఺͔Β 
    ͷ஍఺ʹඵͰҠಈͤ͞Δ
   ✦ ࢝఺ˠ 
   มԽྔˠ9ɿɺ:ɿɹ࣌ؒɿඵ
4. 8FCϖʔδͰΞχϝʔγϣϯ͢Δʹ͸ ✦ $44ΞχϝʔγϣϯɿએݴܕΞχϝʔγϣϯ
   ✦ ͍ܰɾ؆୯
   ✦ ܨ͍ͩΓɾ్தͰࢭΊͨΓɾٯ࠶ੜͨ͠Γʜ͕ۤख
   ✦ +BWB4DSJQUΞχϝʔγϣϯɿ໋ྩܕΞχϝʔγϣϯ
   ✦ දݱྗ͕๛͔
   ✦ ܨ͍ͩΓɺϢʔβʔͷೖྗʹରԠͨ͠Γʜ͕ಘҙ
5. Ξχϝʔγϣϯ͕Ͱ͖Δ+4͍Ζ͍Ζ BOJNBUJPO ͍ʹ͑͠ͷ͗͡Ύͭ 7FMPDJUZKT BOJNBUJPO ͱͷޓ׵ੑΛ΋ͭɺ͍ܰ BOJNFKT BOJNBUJPO ͱͷޓ׵ੑ͸΋ͨͳ͍ɺ͍ܰ 8FC
   "OJNBUJPOT
   "1* ϒϥ΢βඪ४ͰͲ͏ʹ͔͍ͨ͠"1*ɺ
   1PMJGJMM͕ඞཁ
6. +4ͰΞχϝʔγϣϯͬͯ
   ॏ͍Μ͡Όͳ͍ͷʜʁ
7. มԽͤ͞ΔϓϩύςΟΛߟ͑Δ ✦ ΫϦςΟΧϧϨϯμϦϯάύε
   ✦ ϒϥ΢β͕ཁૉΛඳըͯ͠ಈ͔͢·ͰͷྲྀΕ +BWB4DSJQU +BWB4DSJQU 4UZMF -BZPVU 1BJOU $PNQPTJUF
8. ✦ ϨΠΞ΢τ
   ✦ ཁૉͷҐஔɾܗɾେ͖͞Λఆٛ
   ✦ XJEUIɺIFJHIUɺNBSHJOɺMFGUUPQSJHIUCPUUPNʜ
   
   ✦ ϖΠϯτ
   ✦ ཁૉͷϐΫηϧΛඳը
   ✦ CPYTIBEPXɺCPSEFSSBEJVTɺDPMPSɺCBDLHSPVOEDPMPSʜ
   ✦ ίϯϙδοτ
   ✦ USBOTGPSNɺPQBDJUZ ϓϩύςΟ͕֤ϒϥ΢βͰ
   ͲͷϨΠϠʔʹଐ͢Δ͔
   IUUQTDTTUSJHHFSTDPN
9. ✦ ϨΠΞ΢τʹଐ͢ΔϓϩύςΟͰͷΞχϝʔγϣϯ
   ✦ ର৅ཁૉͷҐஔɾେ͖͞ʢδΦϝτϦʣΛ࠶ܭࢉ͢Δ
   ✦ ӨڹΛड͚ΔશͯͷཁૉͷδΦϝτϦ΋࠶ܭࢉ͢Δ
   ✦ ίϯϙδοτʹଐ͢ΔϓϩύςΟͰͷΞχϝʔγϣϯ
   ✦ USBOTGPSNͰͷδΦϝτϦͷมߋ͸ଞཁૉʹӨڹ͠ͳ͍
   ✦ PQBDJUZ͸ϖΠϯτ ࠶ඳը Λ༠ൃ͠ͳ͍
10. SFRVFTU"OJNBUJPO'SBNF ✦ ΞχϝʔγϣϯͷൃՐλΠϛϯάͷ੍ޚʹTFU5JNF0VU  TFU*OUFSWBM Ͱ͸ͳ͘SFRVFTU"OJNBUJPO'SBNF Λར༻͢Δ
    ✦ ϒϥ΢βͷඳը୯Ґͱಉظͯ͠ݺͼग़͠
    ✦ λϒ͕ඇΞΫςΟϒͷࡍ͸'14Λམͱ͢
    ✦ ࣍ͷ࠶ඳըͷલʹ࣍ͷΞχϝʔγϣϯͷؔ਺Λݺͼग़͢ ʠ͓Αͦʡඵʹճ࣮ߦ͞ΕΔ
11. ͤΜͰΜ ✦ ٕज़ॻయʹͯʮΠψͰ΋Θ͔Δ8FC$PNQPOFOUTվగ൛ʯΛ൦෍ ͠·ͨ͠
    ✦ ͦͦ͜͜ͷരࢮΛ͠·ͨ͠
    ✦ IUUQTJOVUFUSBQMVTCPPUIQNJUFNT
12. ͋Γ͕ͱ͏͍͟͝·ͨ͠