$30 off During Our Annual Pro Sale. View Details »

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

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

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

アシアル株式会社

June 24, 2019
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

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