モバイルUIアニメーション入門

2019年6月25日（火）開催のアシアル技術セミナーでの発表資料

Transcript

1. ϞόΠϧUIΞχϝʔγϣϯೖ໳ɹ ʙVueΞϓϦέʔγϣϯΛ୊ࡐʹʙ ΞγΞϧגࣜձࣾ
   ɹΤϯδχΞɹฏࢁ
2. ΞδΣϯμ • ॳΊʹ • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ • ·ͱΊ
3. ॳΊʹ ॳΊͯͷΞχϝʔγϣϯ࣮૷ ՝୊ͱؾ෇͖ ࣗ෼ɿΞχϝʔγϣϯ΁ͷཧղΛਂΊΔ օ͞ΜɿΞχϝʔγϣϯ΁ͷϞνϕʔγϣϯΛߴΊΔ
4. ΞδΣϯμ • ॳΊʹ • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ • ·ͱΊ
5. ਓ͕੡඼ʹٻΊΔ͜ͱͷ༏ઌॱҐ • ੈք࠷େͷϝʔϧ഑৴αʔϏεʮMailChimpʯͷ ɹUXσΟϨΫλʔ(αʔϏεΛ࢖͏ਓͷମݧΛઃܭ͢Δ)ɹ ɹΞʔϩϯɾ΢Υϧλʔ
6. ਓ͕੡඼ʹٻΊΔ͜ͱͷ༏ઌॱҐ • Ξʔϩϯ͕ߟ͑ΔϢʔβʔχʔζͷ֊૚
7. ඼࣭ͷ෼ྨ • ౦ژཧՊେֶڭतɹङ໺لত ඼࣭ͷ෼ྨϞσϧ (ङ໺Ϟσϧ)
8. ङ໺ϞσϧͰͷ඼࣭ͷ෼ྨʢൈਮʣ • ౰ͨΓલ඼࣭ʢྫɿεϚʔτϑΥϯͷىಈʣ ɹɹɹຬͨ͞Εͯ౰ͨΓલ ɹɹɹຬͨ͞Εͳ͚Ε͹ෆຬͱͳΔ • Ұݩత඼࣭ʢྫɿεϚʔτϑΥϯిݯͷ࣋ͪ࣌ؒʣ ɹɹɹຬͨ͞ΕΕ͹ت͹ΕΔ ɹɹɹຬͨ͞Εͳ͚Ε͹ෆຬͱͳΔ • ັྗత඼࣭ʢྫɿεϚʔτϑΥϯͷΞϓϦʣ ɹɹɹຬͨ͞ΕΕ͹ت͹ΕΔ ɹɹɹຬͨ͞Εͳͯ͘΋ෆຬͱ͸ͳΒͳ͍
9. ΞδΣϯμ • ॳΊʹ • Ϣʔβʔ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ • ·ͱΊ
10. Ξχϝʔγϣϯͷ໨త͸ • ߦΘΕͨॲཧΛϢʔβʔʹΘ͔Γ΍͘͢఻͑Δ
11. Ξχϝʔγϣϯͷ໨త͸ • ָ͠͞ɺ໘ന͞Λԋग़͢Δ ग़యɿ3FDJQF
    'JOEFS
    CZ
    4FSIJJ
    )BOVTIDIBL
    c
    %SJCCCMF
    c
    %SJCCCMF
    
    
    
    
    
    
    
    
    
    
    IUUQTESJCCCMFDPNTIPUT3FDJQF'JOEFS
12. ਓ͕੡඼ʹٻΊΔ΋ͷ͸ ັྗత඼࣭ ౰ͨΓલ඼࣭ ϫΫϫΫײɺָ͠͞Λԋग़͢Δ ΞϓϦͰߦΘΕͨॲཧΛ
    ϢʔβʔʹΘ͔Γ΍͘͢఻͑Δ Ұݩత඼࣭
13. ΞδΣϯμ • ॳΊʹ • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ • ·ͱΊ
14. ৭ʑͳΞχϝʔγϣϯ • ΞίʔσΟΦϯ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ • Ϧετදࣔ • ը໘ભҠ • ϩʔσΟϯά • ϓϩάϨεόʔɹɹɹɹɹɹɾɾɾ౳ʑ ग़యɿIUUQTKBPOTFOJPWBQJWVFWPOTMJTUJUFNIUNM
15. ৭ʑͳΞχϝʔγϣϯ • ΞίʔσΟΦϯ • Ϧετදࣔ • ը໘ભҠ • ϩʔσΟϯά • ϓϩάϨεόʔɹɹɹɹɹɹɾɾɾ౳ʑ
16. εϥΠυ͢Δը໘ભҠ
17. ޿͛Δը໘ભҠ
18. ์ࣹܕมܗ • ϚςϦΞϧσβΠϯ ɹɹɹग़యɿ."5&3*"-
    %&4*(/
    
    
    
    
    
    
    
    
    
    IUUQTNBUFSJBMJPEFTJHODPNQPOFOUTCVUUPOTGMPBUJOHBDUJPOCVUUPOIUNMUZQFTPGUSBOTJUJPOT
19. ܨ͗໨Λײͤ͡͞ͳ͍ը໘ભҠ
20. ઀ଓܕΞχϝʔγϣϯ ɹɹɹग़యɿ8JOEPXT
    681
    BQQMJDBUJPOT
    c
    .JDSPTPGU
    %PDT
    
    
    
    
    
    
    
    
    
    IUUQTEPDTNJDSPTPGUDPNKBKQXJOEPXTVXQEFTJHONPUJPODPOOFDUFEBOJNBUJPO
21. ϩʔσΟϯά
22. ϩʔσΟϯά
23. Ϟʔγϣϯϩΰ ग़యɿ3FCSBOE
    
    c
    $BTF
    TUVEJFT
    c
    %FTJHO
    BU
    6CFS
    
    
    
    
    
    
    
    
    
    IUUQTXXXVCFSEFTJHODBTFTUVEJFTSFCSBOE
24. Ϟʔγϣϯϩΰ
25. ϓϩάϨεόʔ
26. ͓ॕ͍ • ొ࿥࡞ۀ͕શͯ׬ྃͨ͠ͱ͖ͷը໘
27. ਧ͖ग़͠ • Πϯετʔϧ௚ޙ
28. ਧ͖ग़͠ • Ξχϝʔγϣϯௐ੔ޙ
29. Ξχϝʔγϣϯͷεϐʔυ • ϚςϦΞϧσβΠϯ ग़యɿ4QFFE
    c
    .BUFSJBM
    %FTJHO
    
    
    
    
    
    
    
    
    
    IUUQTNBUFSJBMJPEFTJHONPUJPOTQFFEIUNM (PPE #BE
30. ࢖༻ϥΠϒϥϦ • anime.js - https://animejs.com
31. ΞδΣϯμ • ॳΊʹ • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ • ·ͱΊ
32. ·ͱΊ • ࠓ·Ͱͷ࿩Λ౿·͑ͯ Ξχϝʔγϣϯ΁ͷϞνϕʔγϣϯ͸ ߴ·Γ·͔ͨ͠ʁ ͦͯ͠…
33. ·ͱΊ গ͠Ͱ΋ߴ͍඼࣭ͷ੡඼Λ࡞Γग़͍͖ͯ͠·͠ΐ͏ʂ