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

ナウいJavaScriptアニメーション実装法

 ナウいJavaScriptアニメーション実装法

【ヒカ☆ラボ】JavaScriptの情報交換LT会~React/Redux,Node.js,アニメーション,Processing等々~

Avatar for Daisuek Nagai

Daisuek Nagai

July 01, 2016
Tweet

Other Decks in Programming

Transcript

  1. 8FC(-ͱ͸ 8FC(-<> ʢ΢ΣϒδʔΤϧʣ ͸ɺ ΢Σϒϒϥ΢βͰ࣍ݩίϯϐϡʔλάϥϑΟ οΫεΛදࣔͤ͞ΔͨΊͷඪ४࢓༷ɻ 0QFO(- ޙड़ͷͱ͓Γ ࣄ্࣮0QFO(- ΋͘͠

    ͸0QFO(-&4Λαϙʔ τ͢Δϓϥο τϑΥʔϜ্Ͱɺ ಛผͳϒϥ΢βͷϓϥάΠϯͳ͠Ͱɺ ϋʔ υ΢ΣΞͰΞΫηϥ Ϩʔ τ͞Εͨࡾ࣍ݩάϥϑΟ οΫεΛදࣔՄೳʹ͢Δɻ ٕज़తʹ͸ɺ +BWB4DSJQUͱωΠςΟ ϒͷ0QFO(-&4ͷόΠϯσΟ ϯάͰ͋Δɻ 8FC(-͸ඇӦརஂମͷ,ISPOPT(SPVQͰ؅ཧ͞Ε͍ͯΔɻ 8FC(-͸)5.-ͷDBOWBTཁૉΛ࢖͏ɻ ରԠ΢Σϒϒϥ΢β͸ҎԼͷ௨Γ<>ɻ ओཁͳϒϥ΢β͸࠷৽൛Ͱ͸શͯͷϒϥ΢β͕ରԠ͍ͯ͠Δɻ ͨͩ͠ɺ ϏσΦΧʔ υ͕0QFO(-Λαϙʔ τ͍ͯ͠Δඞཁ͕͋Δɻ ·ͨɺ ޙड़ ͷηΩϡϦςΟ্ͷ໰୊͔Β(-@"3#@SPCVTUOFTT 0QFO(- ΋͘͠ ͸(-@&95@SPCVTUOFTT 0QFO(-&4 ͷରԠ͕ඞཁͰ ͋Δɻ ͦͷͨΊɺ ྫ͑͹*OUFM)%(SBQIJDTͰ͸ ʮ8JOEPXTͰ͸0QFO(-·ͰͷରԠ͕ͩ.BD049΍-JOVYͰ͸0QFO(-·Ͱ ରԠ͍ͯ͠Δ4BOEZ#SJEHFʯ Ҏ߱ 4BOEZ#SJEHFͰ͸0QFO(-ͷ.BD049͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT͸(-@"3#@SPCVTUOFTTʹඇରԠͷ͸ͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ ࣮ݱ͢Δ৔߹΋͋Δ ͷੈ୅͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ࣮ݱ͢Δ৔߹΍ઃఆෆ ཁͰιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ৔߹ͳͲΛআ͖0QFO(-Yੈ୅΍0QFO(-΍0QFO(-͸΢Σϒϒϥ΢βଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͷ࢖༻ͳͲ΋ؚΉ Λ͠ͳ͍ͱ8FC(-Λར༻Ͱ͖ͳ͍ ৔߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τ΢ΣΞϨϯμϦϯάͱ͸ผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͳͲͷ࢖༻ͳͲʹΑΓιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-ͷ࣮ߦ ΋࣮ݱՄೳͰ͋Δɻ ·ͨɺ ͨͱ͑͹*OUFM(.νοϓηο τͱ.FTBυϥΠόͱͷ૊Έ߹ΘͤͰ͸0QFO(-Λαϙʔ τ͠ͳ͍͕ 0QFO(-Λαϙʔ τ͠ɺ ͔ͭɺ ֦ுػೳͱ ͯ͠(-@"3#@SPCVTUOFTTΛαϙʔ τ͢ΔͨΊ-JOVY൛'JSFGPYͰඳը଎౓ͦ͜஗͍΋ͷͷϋʔ υ ΢ΣΞΞΫηϥϨʔγϣϯ͕༗ޮͳ8FC(-Λ࣮ߦՄೳͰ͋Δɻ ͲͷΑ ͏ ͳ04 ɾ ϒϥ΢βͰ8FC(-Λ࣮ߦ͢Δʹͯ͠΋֤ϒϥ΢β͝ͱʹผʹఆΊ ΒΕͨ(16ϒϩοΫϦε τ ֤ϒϥ΢β͝ͱʹ04ผ ɾ ϏσΦνοϓผ ɾ ϏσΦ υϥΠόͷόʔδϣϯผ ɾ ֤ϒϥ΢βͷόʔδϣϯผͷ ʢҎԼུʣ 8FC(-8JLJQFEJB IUUQTKBXJLJQFEJBPSHXJLJ8FC(-
  2. 8FC(-ͱ͸ 8FC(-<> ʢ΢ΣϒδʔΤϧʣ ͸ɺ ΢Σϒϒϥ΢βͰ࣍ݩίϯϐϡʔλάϥϑΟ οΫεΛදࣔͤ͞ΔͨΊͷඪ४࢓༷ɻ 0QFO(- ޙड़ͷͱ͓Γ ࣄ্࣮0QFO(- ΋͘͠

    ͸0QFO(-&4Λαϙʔ τ͢Δϓϥο τϑΥʔϜ্Ͱɺ ಛผͳϒϥ΢βͷϓϥάΠϯͳ͠Ͱɺ ϋʔ υ΢ΣΞͰΞΫηϥ Ϩʔ τ͞Εͨࡾ࣍ݩάϥϑΟ οΫεΛදࣔՄೳʹ͢Δɻ ٕज़తʹ͸ɺ +BWB4DSJQUͱωΠςΟ ϒͷ0QFO(-&4ͷόΠϯσΟ ϯάͰ͋Δɻ 8FC(-͸ඇӦརஂମͷ,ISPOPT(SPVQͰ؅ཧ͞Ε͍ͯΔɻ 8FC(-͸)5.-ͷDBOWBTཁૉΛ࢖͏ɻ ରԠ΢Σϒϒϥ΢β͸ҎԼͷ௨Γ<>ɻ ओཁͳϒϥ΢β͸࠷৽൛Ͱ͸શͯͷϒϥ΢β͕ରԠ͍ͯ͠Δɻ ͨͩ͠ɺ ϏσΦΧʔ υ͕0QFO(-Λαϙʔ τ͍ͯ͠Δඞཁ͕͋Δɻ ·ͨɺ ޙड़ ͷηΩϡϦςΟ্ͷ໰୊͔Β(-@"3#@SPCVTUOFTT 0QFO(- ΋͘͠ ͸(-@&95@SPCVTUOFTT 0QFO(-&4 ͷରԠ͕ඞཁͰ ͋Δɻ ͦͷͨΊɺ ྫ͑͹*OUFM)%(SBQIJDTͰ͸ ʮ8JOEPXTͰ͸0QFO(-·ͰͷରԠ͕ͩ.BD049΍-JOVYͰ͸0QFO(-·Ͱ ରԠ͍ͯ͠Δ4BOEZ#SJEHFʯ Ҏ߱ 4BOEZ#SJEHFͰ͸0QFO(-ͷ.BD049͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT͸(-@"3#@SPCVTUOFTTʹඇରԠͷ͸ͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ ࣮ݱ͢Δ৔߹΋͋Δ ͷੈ୅͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ࣮ݱ͢Δ৔߹΍ઃఆෆ ཁͰιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ৔߹ͳͲΛআ͖0QFO(-Yੈ୅΍0QFO(-΍0QFO(-͸΢Σϒϒϥ΢βଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͷ࢖༻ͳͲ΋ؚΉ Λ͠ͳ͍ͱ8FC(-Λར༻Ͱ͖ͳ͍ ৔߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τ΢ΣΞϨϯμϦϯάͱ͸ผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͳͲͷ࢖༻ͳͲʹΑΓιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-ͷ࣮ߦ ΋࣮ݱՄೳͰ͋Δɻ ·ͨɺ ͨͱ͑͹*OUFM(.νοϓηο τͱ.FTBυϥΠόͱͷ૊Έ߹ΘͤͰ͸0QFO(-Λαϙʔ τ͠ͳ͍͕ 0QFO(-Λαϙʔ τ͠ɺ ͔ͭɺ ֦ுػೳͱ ͯ͠(-@"3#@SPCVTUOFTTΛαϙʔ τ͢ΔͨΊ-JOVY൛'JSFGPYͰඳը଎౓ͦ͜஗͍΋ͷͷϋʔ υ ΢ΣΞΞΫηϥϨʔγϣϯ͕༗ޮͳ8FC(-Λ࣮ߦՄೳͰ͋Δɻ ͲͷΑ ͏ ͳ04 ɾ ϒϥ΢βͰ8FC(-Λ࣮ߦ͢Δʹͯ͠΋֤ϒϥ΢β͝ͱʹผʹఆΊ ΒΕͨ(16ϒϩοΫϦε τ ֤ϒϥ΢β͝ͱʹ04ผ ɾ ϏσΦνοϓผ ɾ ϏσΦ υϥΠόͷόʔδϣϯผ ɾ ֤ϒϥ΢βͷόʔδϣϯผͷ ʢҎԼུʣ 8FC(-8JLJQFEJB IUUQTKBXJLJQFEJBPSHXJLJ8FC(- ͍ܰ