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

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

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

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

354f239fdcbbc299b6b06ad4c0eee254?s=128

Daisuek Nagai

July 01, 2016
Tweet

Transcript

  1. φ΢͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮૷๏ ʲώΧˑϥϘʳ +BWB4DSJQUͷ৘ใަ׵-5ձ4QFBLFS/P ӬҪେี Daisuke Nagai

  2. ӬҪେี %0/(63**OD!VXXXEBJTVLFOBHBJDPN ՎͬͯགྷΕΔ8FCσβΠφʔ ࣗݾ঺հ

  3. 8FCʹ͓͚ΔΞχϝʔγϣϯͷྺ࢙   (*'Ξχϝʕγϣϯ )5.- FYNBSRVFF +BWB4DSJQU 'MBTI  K2VFSZ

      $44 ʁ ʁ ʁ ʜ ŘŵŠŠ
  4. XXXEPOHVSJDPN ୊ࡐ

  5. ͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS

    animation
  6. 01 Parallax scrolling 02 Stop motion animation 03 CSS animation

    ͓͠ͳ͕͖
  7. top ʹͦΕͧΕζϥͨ͠εΫϩʔϧͷ஋Λ୅ೖ ཁૉΛposition:fixed;Ͱ഑ஔ εΫϩʔϧͷ஋Λऔಘ ͍··Ͱͷ1BSBMMBYTDSPMMJOH $44 +BWB4DSJQU 1 2 3

  8. top ʹͦΕͧΕζϥͨ͠εΫϩʔϧͷ஋Λ୅ೖ ཁૉΛposition:fixed;Ͱ഑ஔ εΫϩʔϧͷ஋Λऔಘ ͍··Ͱͷ1BSBMMBYTDSPMMJOH $44 +BWB4DSJQU 1 2 3

    ॏ͍
  9. ߴղ૾౓ʢQYʣ ͷը૾ʷຕ ࠓճ࢖༻͍ͯ͠Δഎܠը૾

  10. 8FC(- φ΢͍1BSBMMBYTDSPMMJOH

  11. 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(-
  12. 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(- ͍ܰ
  13. 8FC(-Λѻ͑ΔϥΠϒϥϦ $SFBUF+4 QJYJKT UISFFKT 1SPDFTTJOH ʜ

  14. 8FC(-Λѻ͑ΔϥΠϒϥϦ ʜ $SFBUF+4 QJYJKT UISFFKT 1SPDFTTJOH

  15. ˞ͦͷ··ͩͱ8FC(-Λѻ͑ͳ͍ͷͰผ్ ʮXFCHM7&34*0/NJOKTʯ ΛಡΈࠐΈ·͢ IUUQTHJUIVCDPN$SFBUF+4&BTFM+4USFFNBTUFSMJC ࣮૷ྫ $PG GFF4DSJQU

  16. ͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS

    animation
  17. setInterval Ͱbackground-position Λը૾෯෼Ҿ͘ εϓϥΠ τγʔ τΛ࡞੒ 1 ͍··Ͱͷ4UPQNPUJPOBOJNFUJPO +BWB4DSJQU *NH

    2
  18. setInterval Ͱbackground-position Λը૾෯෼Ҿ͘ εϓϥΠ τγʔ τΛ࡞੒ 1 ͍··Ͱͷ4UPQNPUJPOBOJNFUJPO +BWB4DSJQU *NH

    2 ࢖͍ʹ͘ ͍
  19. ࠓճ࢖༻͍ͯ͠ΔεϓϥΠ τγʔ τ ʮʙϑϨʔϜ໨͸ճ܁Γฦ͍ͨ͠ʯ ʮϑϨʔϜ໨͚ͩඵʹ͍ͨ͠ʯ ͳͲʜʜ

  20. $SFBUF+4 φ΢͍4UPQNPUJPOBOJNBUJPO

  21. $SFBUF+4 4QSJUF4IFFU$MBTT Ξχϝʔγϣϯ͝ͱʹͲͷϑϨʔϜΛ࢖༻͢Δ͔ઃఆͰ͖Δ +BWB4DSJQU

  22. ࣮૷ྫ $PG GFF4DSJQU

  23. ͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS

    animation
  24. ͍··Ͱͷ$44"OJNBUJPO +BWB4DSJQU K2VFSZBOJNBUFΛ࢖ͬͯΞχϝʔγϣϯ͢Δ 1

  25. ͍··Ͱͷ$44"OJNBUJPO +BWB4DSJQU K2VFSZBOJNBUFΛ࢖ͬͯΞχϝʔγϣϯ͢Δ 1 ΧΫͭ͘

  26. 7FMPDJUZKT φ΢͍$44BOJNBUJPO

  27. ࣮૷ྫ $PG GFF4DSJQU

  28. ·ͱΊ ΍Γਚ͘ ͞ΕͨදݱͰ΋ ࣮૷ํ๏Λݟ௚͢͜ͱͰ ΋ͬͱύϑΥʔϚϯεΛΑ͘ ͨ͠Γ ΋ͬͱ͔ͬ͜Α͘ Ͱ͖ͨΓ ͠·͢

  29. ·ͱΊ ʮྲྀߦ͍ͬͯΔ͔Βʯ ͱ͍͏ج४Ͱ͸ͳ͘ ͯ ʮͳʹΛ఻͍͔͑ͨʯ ͰΞχϝʔγϣϯΛߟ͑·͠ ΐ ͏ɹ

  30. ͝ਗ਼ௌ͋Γ͕ͱ ͏ ͍͟͝·ͨ͠ φ΢͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮૷๏ ʲώΧˑϥϘʳ +BWB4DSJQUͷ৘ใަ׵-5ձ4QFBLFS/P