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

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

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

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

アシアル株式会社

June 24, 2019
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

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

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

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

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

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

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

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

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

    ັྗత඼࣭ʢྫɿεϚʔτϑΥϯͷΞϓϦʣ ɹɹɹຬͨ͞ΕΕ͹ت͹ΕΔ ɹɹɹຬͨ͞Εͳͯ͘΋ෆຬͱ͸ͳΒͳ͍
  9. ΞδΣϯμ • ॳΊʹ • Ϣʔβʔ͕੡඼ʹٻΊΔ͜ͱͱ඼࣭ʹ͍ͭͯ • Ξχϝʔγϣϯͷ໨తͱॏཁੑ • ࣮ྫ •

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

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

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

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

    ·ͱΊ
  14. ৭ʑͳΞχϝʔγϣϯ • ΞίʔσΟΦϯ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ • Ϧετදࣔ • ը໘ભҠ • ϩʔσΟϯά

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

    ϓϩάϨεόʔɹɹɹɹɹɹɾɾɾ౳ʑ
  16. εϥΠυ͢Δը໘ભҠ

  17. ޿͛Δը໘ભҠ

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

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

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

  21. ϩʔσΟϯά

  22. ϩʔσΟϯά

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

  24. Ϟʔγϣϯϩΰ

  25. ϓϩάϨεόʔ

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

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

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

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

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

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

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

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

  34. None