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

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

Transcript

1. φ΢͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮૷๏ ʲώΧˑϥϘʳ
   +BWB4DSJQUͷ৘ใަ׵-5ձ
   
   4QFBLFS
   /P ӬҪେี Daisuke Nagai
2. ӬҪେี %0/(63*
   *OD
   
   !V
   
   XXXEBJTVLFOBHBJDPN ՎͬͯགྷΕΔ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;
   Ͱ഑ஔ εΫϩʔϧͷ஋Λऔಘ ͍··Ͱͷ1BSBMMBY
   TDSPMMJOH $44 +BWB4DSJQU 1 2 3
8. top ʹͦΕͧΕζϥͨ͠εΫϩʔϧͷ஋Λ୅ೖ ཁૉΛ
   position:fixed;
   Ͱ഑ஔ εΫϩʔϧͷ஋Λऔಘ ͍··Ͱͷ1BSBMMBY
   TDSPMMJOH $44 +BWB4DSJQU 1 2 3 ॏ͍
9. ߴղ૾౓ʢQYʣ ͷը૾
   ʷ
   ຕ ࠓճ࢖༻͍ͯ͠Δഎܠը૾
10. 8FC(- φ΢͍1BSBMMBY
    TDSPMMJOH
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(-
    
    ·ͰͷରԠ͕ͩ.BD04
    9΍-JOVYͰ͸
    0QFO(-
    
    ·Ͱ ରԠ͍ͯ͠Δ
    4BOEZ
    #SJEHFʯ
    Ҏ߱ 4BOEZ
    #SJEHFͰ͸0QFO(-
    ͷ.BD04
    9͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-
    ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT͸(-@"3#@SPCVTUOFTTʹඇରԠͷ͸ͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ ࣮ݱ͢Δ৔߹΋͋Δ ͷੈ୅͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ࣮ݱ͢Δ৔߹΍ઃఆෆ ཁͰιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ৔߹ͳͲΛআ͖0QFO(-
    Y
    ੈ୅΍0QFO(-
    ΍0QFO(-
    ͸΢Σϒϒϥ΢βଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB
    0⒎TDSFFO
    SFOEFSJOH
    FYUFOTJPO ྫMJCPTNFTB ͷ࢖༻ͳͲ΋ؚΉ Λ͠ͳ͍ͱ
    8FC(-
    Λར༻Ͱ͖ͳ͍ ৔߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τ΢ΣΞϨϯμϦϯάͱ͸ผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB
    0⒎TDSFFO
    SFOEFSJOH
    FYUFOTJPO ྫ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(-
    
    ·ͰͷରԠ͕ͩ.BD04
    9΍-JOVYͰ͸
    0QFO(-
    
    ·Ͱ ରԠ͍ͯ͠Δ
    4BOEZ
    #SJEHFʯ
    Ҏ߱ 4BOEZ
    #SJEHFͰ͸0QFO(-
    ͷ.BD04
    9͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-
    ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT͸(-@"3#@SPCVTUOFTTʹඇରԠͷ͸ͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ ࣮ݱ͢Δ৔߹΋͋Δ ͷੈ୅͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ಺෦తʹ%JSFDU%Λ࢖༻ͯ͠8FC(-Λ࣮ݱ͢Δ৔߹΍ઃఆෆ ཁͰιϑ τ΢ΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ৔߹ͳͲΛআ͖0QFO(-
    Y
    ੈ୅΍0QFO(-
    ΍0QFO(-
    ͸΢Σϒϒϥ΢βଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB
    0⒎TDSFFO
    SFOEFSJOH
    FYUFOTJPO ྫMJCPTNFTB ͷ࢖༻ͳͲ΋ؚΉ Λ͠ͳ͍ͱ
    8FC(-
    Λར༻Ͱ͖ͳ͍ ৔߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τ΢ΣΞϨϯμϦϯάͱ͸ผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB
    0⒎TDSFFO
    SFOEFSJOH
    FYUFOTJPO ྫ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 ͍··Ͱͷ4UPQ
    NPUJPO
    BOJNFUJPO +BWB4DSJQU *NH 2
18. setInterval Ͱ
    background-position Λը૾෯෼Ҿ͘ εϓϥΠ τγʔ τΛ࡞੒ 1 ͍··Ͱͷ4UPQ
    NPUJPO
    BOJNFUJPO +BWB4DSJQU *NH 2 ࢖͍ʹ͘ ͍
19. ࠓճ࢖༻͍ͯ͠ΔεϓϥΠ τγʔ τ ʮʙϑϨʔϜ໨͸ճ܁Γฦ͍ͨ͠ʯ ʮϑϨʔϜ໨͚ͩඵʹ͍ͨ͠ʯ
    ͳͲʜʜ
20. $SFBUF+4 φ΢͍4UPQ
    NPUJPO
    BOJNBUJPO
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 φ΢͍$44
    BOJNBUJPO
27. ࣮૷ྫ $PG
    GFF4DSJQU
28. ·ͱΊ ΍Γਚ͘ ͞ΕͨදݱͰ΋ ࣮૷ํ๏Λݟ௚͢͜ͱͰ ΋ͬͱύϑΥʔϚϯεΛΑ͘ ͨ͠Γ ΋ͬͱ͔ͬ͜Α͘ Ͱ͖ͨΓ ͠·͢
29. ·ͱΊ ʮྲྀߦ͍ͬͯΔ͔Βʯ ͱ͍͏ج४Ͱ͸ͳ͘ ͯ ʮͳʹΛ఻͍͔͑ͨʯ ͰΞχϝʔγϣϯΛߟ͑·͠ ΐ ͏ɹ
30. ͝ਗ਼ௌ͋Γ͕ͱ ͏ ͍͟͝·ͨ͠ φ΢͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮૷๏ ʲώΧˑϥϘʳ
    +BWB4DSJQUͷ৘ใަ׵-5ձ
    
    4QFBLFS
    /P