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

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

Transcript

1. ϞόΠϧUIΞχϝʔγϣϯೖ໳ɹ
   ʙVueΞϓϦέʔγϣϯΛ୊ࡐʹʙ
   ΞγΞϧגࣜձࣾ
   ɹΤϯδχΞɹฏࢁ
   

   View Slide

2. ΞδΣϯμ
   • ॳΊʹ
   • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ
   • Ξχϝʔγϣϯͷ໨తͱॏཁੑ
   • ࣮ྫ
   • ·ͱΊ
   

   View Slide

3. ॳΊʹ
   ॳΊͯͷΞχϝʔγϣϯ࣮૷
   ՝୊ͱؾ෇͖
   ࣗ෼ɿΞχϝʔγϣϯ΁ͷཧղΛਂΊΔ
   օ͞ΜɿΞχϝʔγϣϯ΁ͷϞνϕʔγϣϯΛߴΊΔ
   

   View Slide

4. ΞδΣϯμ
   • ॳΊʹ
   • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ
   • Ξχϝʔγϣϯͷ໨తͱॏཁੑ
   • ࣮ྫ
   • ·ͱΊ
   

   View Slide

5. ਓ͕੡඼ʹٻΊΔ͜ͱͷ༏ઌॱҐ
   • ੈք࠷େͷϝʔϧ഑৴αʔϏεʮMailChimpʯͷ
   ɹUXσΟϨΫλʔ(αʔϏεΛ࢖͏ਓͷମݧΛઃܭ͢Δ)ɹ
   ɹΞʔϩϯɾ΢Υϧλʔ
   

   View Slide

6. ਓ͕੡඼ʹٻΊΔ͜ͱͷ༏ઌॱҐ
   • Ξʔϩϯ͕ߟ͑ΔϢʔβʔχʔζͷ֊૚
   

   View Slide

7. ඼࣭ͷ෼ྨ
   • ౦ژཧՊେֶڭतɹङ໺لত
   ඼࣭ͷ෼ྨϞσϧ (ङ໺Ϟσϧ)
   

   View Slide

8. ङ໺ϞσϧͰͷ඼࣭ͷ෼ྨʢൈਮʣ
   • ౰ͨΓલ඼࣭ʢྫɿεϚʔτϑΥϯͷىಈʣ
   ɹɹɹຬͨ͞Εͯ౰ͨΓલ
   ɹɹɹຬͨ͞Εͳ͚Ε͹ෆຬͱͳΔ
   • Ұݩత඼࣭ʢྫɿεϚʔτϑΥϯిݯͷ࣋ͪ࣌ؒʣ
   ɹɹɹຬͨ͞ΕΕ͹ت͹ΕΔ
   ɹɹɹຬͨ͞Εͳ͚Ε͹ෆຬͱͳΔ
   • ັྗత඼࣭ʢྫɿεϚʔτϑΥϯͷΞϓϦʣ
   ɹɹɹຬͨ͞ΕΕ͹ت͹ΕΔ
   ɹɹɹຬͨ͞Εͳͯ͘΋ෆຬͱ͸ͳΒͳ͍
   

   View Slide

9. ΞδΣϯμ
   • ॳΊʹ
   • Ϣʔβʔ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ
   • Ξχϝʔγϣϯͷ໨తͱॏཁੑ
   • ࣮ྫ
   • ·ͱΊ
   

   View Slide

10. Ξχϝʔγϣϯͷ໨త͸
    • ߦΘΕͨॲཧΛϢʔβʔʹΘ͔Γ΍͘͢఻͑Δ
    

    View Slide

11. Ξχϝʔγϣϯͷ໨త͸
    • ָ͠͞ɺ໘ന͞Λԋग़͢Δ
    ग़యɿ3FDJQF'JOEFSCZ4FSIJJ)BOVTIDIBLc%SJCCCMFc%SJCCCMF
    IUUQTESJCCCMFDPNTIPUT3FDJQF'JOEFS
    

    View Slide

12. ਓ͕੡඼ʹٻΊΔ΋ͷ͸
    ັྗత඼࣭
    ౰ͨΓલ඼࣭
    ϫΫϫΫײɺָ͠͞Λԋग़͢Δ
    ΞϓϦͰߦΘΕͨॲཧΛ
    ϢʔβʔʹΘ͔Γ΍͘͢఻͑Δ
    Ұݩత඼࣭
    

    View Slide

13. ΞδΣϯμ
    • ॳΊʹ
    • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ
    • Ξχϝʔγϣϯͷ໨తͱॏཁੑ
    • ࣮ྫ
    • ·ͱΊ
    

    View Slide

14. ৭ʑͳΞχϝʔγϣϯ
    • ΞίʔσΟΦϯ
    ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ
    • Ϧετදࣔ
    • ը໘ભҠ
    • ϩʔσΟϯά
    • ϓϩάϨεόʔɹɹɹɹɹɹɾɾɾ౳ʑ
    ग़యɿIUUQTKBPOTFOJPWBQJWVFWPOTMJTUJUFNIUNM
    

    View Slide

15. ৭ʑͳΞχϝʔγϣϯ
    • ΞίʔσΟΦϯ
    • Ϧετදࣔ
    • ը໘ભҠ
    • ϩʔσΟϯά
    • ϓϩάϨεόʔɹɹɹɹɹɹɾɾɾ౳ʑ
    

    View Slide

16. εϥΠυ͢Δը໘ભҠ
    

    View Slide

17. ޿͛Δը໘ભҠ
    

    View Slide

18. ์ࣹܕมܗ
    • ϚςϦΞϧσβΠϯ
    ɹɹɹग़యɿ."5&3*"-%&4*(/
    IUUQTNBUFSJBMJPEFTJHODPNQPOFOUTCVUUPOTGMPBUJOHBDUJPOCVUUPOIUNMUZQFTPGUSBOTJUJPOT
    

    View Slide

19. ܨ͗໨Λײͤ͡͞ͳ͍ը໘ભҠ
    

    View Slide

20. ઀ଓܕΞχϝʔγϣϯ
    ɹɹɹग़యɿ8JOEPXT681BQQMJDBUJPOTc.JDSPTPGU%PDT
    IUUQTEPDTNJDSPTPGUDPNKBKQXJOEPXTVXQEFTJHONPUJPODPOOFDUFEBOJNBUJPO
    

    View Slide

21. ϩʔσΟϯά
    

    View Slide

22. ϩʔσΟϯά
    

    View Slide

23. Ϟʔγϣϯϩΰ
    ग़యɿ3FCSBOEc$BTFTUVEJFTc%FTJHOBU6CFS
    IUUQTXXXVCFSEFTJHODBTFTUVEJFTSFCSBOE
    

    View Slide

24. Ϟʔγϣϯϩΰ
    

    View Slide

25. ϓϩάϨεόʔ
    

    View Slide

26. ͓ॕ͍
    • ొ࿥࡞ۀ͕શͯ׬ྃͨ͠ͱ͖ͷը໘
    

    View Slide

27. ਧ͖ग़͠
    • Πϯετʔϧ௚ޙ
    

    View Slide

28. ਧ͖ग़͠
    • Ξχϝʔγϣϯௐ੔ޙ
    

    View Slide

29. Ξχϝʔγϣϯͷεϐʔυ
    • ϚςϦΞϧσβΠϯ
    ग़యɿ4QFFEc.BUFSJBM%FTJHO
    IUUQTNBUFSJBMJPEFTJHONPUJPOTQFFEIUNM
    (PPE #BE
    

    View Slide

30. ࢖༻ϥΠϒϥϦ
    • anime.js - https://animejs.com
    

    View Slide

31. ΞδΣϯμ
    • ॳΊʹ
    • ਓ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ
    • Ξχϝʔγϣϯͷ໨తͱॏཁੑ
    • ࣮ྫ
    • ·ͱΊ
    

    View Slide

32. ·ͱΊ
    • ࠓ·Ͱͷ࿩Λ౿·͑ͯ
    Ξχϝʔγϣϯ΁ͷϞνϕʔγϣϯ͸
    ߴ·Γ·͔ͨ͠ʁ
    ͦͯ͠…
    

    View Slide

33. ·ͱΊ
    গ͠Ͱ΋ߴ͍඼࣭ͷ੡඼Λ࡞Γग़͍͖ͯ͠·͠ΐ͏ʂ
    

    View Slide

34. View Slide