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

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

atsuco
October 24, 2018
460

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

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

atsuco

October 24, 2018
Tweet

Transcript

  1. !BUTVDP@
    +4ͰΞχϝʔγϣϯʹೖ໳͍ͨ͠
    8F"SF+BWB4DSJQUFST

    View full-size slide

  2. ΞαΦΧΞπί!BUTVDP@
    ϑϦʔϥϯε
    ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
    ೣ೿ͷ؁ౘɺң͕௧͍ܥ8FC԰
    ʙɹ8F+4ӡӦ

    View full-size slide

  3. Ξχϝʔγϣϯͱ͸ʁ
    ✦ ࣌ؒܦաʹ൐͍ɺ͋Δ஋ΛʙͷؒͰมԽͤ͞Δ
    ✦ ࢝఺ɾมԽྔɾ࣌ؒʹΑͬͯදݱ͞ΕΔ
    ✦ ը૾Λ
    ͷ஍఺͔Β
    ͷ஍఺ʹඵͰҠಈͤ͞Δ
    ✦ ࢝఺ˠ มԽྔˠ9ɿɺ:ɿɹ࣌ؒɿඵ

    View full-size slide

  4. 8FCϖʔδͰΞχϝʔγϣϯ͢Δʹ͸
    ✦ $44ΞχϝʔγϣϯɿએݴܕΞχϝʔγϣϯ
    ✦ ͍ܰɾ؆୯
    ✦ ܨ͍ͩΓɾ్தͰࢭΊͨΓɾٯ࠶ੜͨ͠Γʜ͕ۤख
    ✦ +BWB4DSJQUΞχϝʔγϣϯɿ໋ྩܕΞχϝʔγϣϯ
    ✦ දݱྗ͕๛͔
    ✦ ܨ͍ͩΓɺϢʔβʔͷೖྗʹରԠͨ͠Γʜ͕ಘҙ

    View full-size slide

  5. Ξχϝʔγϣϯ͕Ͱ͖Δ+4͍Ζ͍Ζ
    BOJNBUJPO
    ͍ʹ͑͠ͷ͗͡Ύͭ
    7FMPDJUZKT BOJNBUJPO
    ͱͷޓ׵ੑΛ΋ͭɺ͍ܰ
    BOJNFKT BOJNBUJPO
    ͱͷޓ׵ੑ͸΋ͨͳ͍ɺ͍ܰ
    8FC"OJNBUJPOT"1* ϒϥ΢βඪ४ͰͲ͏ʹ͔͍ͨ͠"1*ɺ
    1PMJGJMM͕ඞཁ

    View full-size slide

  6. +4ͰΞχϝʔγϣϯͬͯ
    ॏ͍Μ͡Όͳ͍ͷʜʁ

    View full-size slide

  7. มԽͤ͞ΔϓϩύςΟΛߟ͑Δ
    ✦ ΫϦςΟΧϧϨϯμϦϯάύε
    ✦ ϒϥ΢β͕ཁૉΛඳըͯ͠ಈ͔͢·ͰͷྲྀΕ
    +BWB4DSJQU
    +BWB4DSJQU 4UZMF -BZPVU 1BJOU $PNQPTJUF

    View full-size slide

  8. ✦ ϨΠΞ΢τ
    ✦ ཁૉͷҐஔɾܗɾେ͖͞Λఆٛ
    ✦ XJEUIɺIFJHIUɺNBSHJOɺMFGUUPQSJHIUCPUUPNʜ
    ✦ ϖΠϯτ
    ✦ ཁૉͷϐΫηϧΛඳը
    ✦ CPYTIBEPXɺCPSEFSSBEJVTɺDPMPSɺCBDLHSPVOEDPMPSʜ
    ✦ ίϯϙδοτ
    ✦ USBOTGPSNɺPQBDJUZ
    ϓϩύςΟ͕֤ϒϥ΢βͰ
    ͲͷϨΠϠʔʹଐ͢Δ͔
    IUUQTDTTUSJHHFSTDPN

    View full-size slide

  9. ✦ ϨΠΞ΢τʹଐ͢ΔϓϩύςΟͰͷΞχϝʔγϣϯ
    ✦ ର৅ཁૉͷҐஔɾେ͖͞ʢδΦϝτϦʣΛ࠶ܭࢉ͢Δ
    ✦ ӨڹΛड͚ΔશͯͷཁૉͷδΦϝτϦ΋࠶ܭࢉ͢Δ
    ✦ ίϯϙδοτʹଐ͢ΔϓϩύςΟͰͷΞχϝʔγϣϯ
    ✦ USBOTGPSNͰͷδΦϝτϦͷมߋ͸ଞཁૉʹӨڹ͠ͳ͍
    ✦ PQBDJUZ͸ϖΠϯτ ࠶ඳը
    Λ༠ൃ͠ͳ͍

    View full-size slide

  10. SFRVFTU"OJNBUJPO'SBNF

    ✦ ΞχϝʔγϣϯͷൃՐλΠϛϯάͷ੍ޚʹTFU5JNF0VU

    TFU*OUFSWBM
    Ͱ͸ͳ͘SFRVFTU"OJNBUJPO'SBNF
    Λར༻͢Δ
    ✦ ϒϥ΢βͷඳը୯Ґͱಉظͯ͠ݺͼग़͠
    ✦ λϒ͕ඇΞΫςΟϒͷࡍ͸'14Λམͱ͢
    ✦ ࣍ͷ࠶ඳըͷલʹ࣍ͷΞχϝʔγϣϯͷؔ਺Λݺͼग़͢
    ʠ͓Αͦʡඵʹճ࣮ߦ͞ΕΔ

    View full-size slide

  11. ͤΜͰΜ
    ✦ ٕज़ॻయʹͯʮΠψͰ΋Θ͔Δ8FC$PNQPOFOUTվగ൛ʯΛ൦෍
    ͠·ͨ͠
    ✦ ͦͦ͜͜ͷരࢮΛ͠·ͨ͠
    ✦ IUUQTJOVUFUSBQMVTCPPUIQNJUFNT

    View full-size slide

  12. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide