「Lottie」でお手軽Animation実装 / implement animation with Lottie

2017.05.24
potatotips #40 (iOS/Android開発Tips共有会)
https://potatotips.connpass.com/event/55019/

Transcript

1. ʮ-PUUJFʯͰ͓खܰ"OJNBUJPO࣮૷
   
   QPUBUPUJQT!3FUUZ
   !TIBOPOJN
   

   View Slide

2. ࣰݪ߂ޫ
   )JSPNJUTV4IJOPIBSB
   !TIBOPOJN
   

   View Slide

3. View Slide

4. -PUUJF
   

   View Slide

5. -PUUJF
   w 5IF"JS#O#EFTJHOUFBNDSFBUFE
   w -PUUJFJTBNPCJMFMJCSBSZUIBUQBSTFT"EPCF
   "GUFS&GGFDUTBOJNBUJPOTFYQPSUFEBTKTPO
   XJUI#PEZNPWJOBOESFOEFSTUIFNOBUJWFMZ
   PONPCJMF
   w -PUUJFGPS"OESPJE J04 BOE3FBDU/BUJWF
   

   View Slide

6. View Slide

7. View Slide

8. "XFTPNF
   

   View Slide

9. )PXUPVTF
   w "EPCF"GUFS&GGFDUTͰ"OJNBUJPO࡞੒
   w "OJNBUJPOΛCPEZNPWJOͰ+40/ʹม׵
   w ΞϓϦʹ૊ΈࠐΉ
   

   View Slide

10. View Slide

11. "EPCF"GUFS&GGFDUT
    w ө૾ͷσδλϧ߹੒΍ϞʔγϣϯɾάϥϑΟο
    ΫεɺλΠτϧ੍࡞ͳͲΛ໨తͱͨ͠ιϑτ
    ΢ΣΞ XJLJQFEJB
    
    

    View Slide

12. #PEZNPWJO
    w "GUFS&GGFDUTQMVHJOGPSFYQPSUJOHBOJNBUJPOT
    

    View Slide

13. ΞϓϦʹ૊ΈࠐΉ
    CVJMEHSBEMF
    .BJO"DUJWJUZLU
    

    View Slide

14. ΞϓϦʹ૊ΈࠐΉ
    BDUJWJUZ@NBJOYNM
    

    View Slide

15. %FNP
    

    View Slide

16. 6TFDBTF
    w -PBEJOH"OJNBUJPO
    w *DPO"OJNBUJPO
    w ը໘શମͷΞχϝʔγϣϯʹ͸ෆ޲͖ʁ
    

    View Slide

17. IUUQTXXXOBUJWFTDSJQUPSHCMPHMPUUJFBOJNBUJPOT
    

    View Slide

18. ಋೖ·Ͱͷϋʔυϧ
    w "GUFS&GGFDUT୭͕΍Δͷ໰୊
    w σβΠφʔ͞ΜʁΤϯδχΞ͕ࣗ෼Ͱʁ
    

    View Slide

19. -PUUJF'JMFTDPN
    w -PUUJFͰಡΈࠐΊΔ+40/ͷ഑෍αΠτ
    w "MMUIFpMFTBWBJMBCMFJO-PUUJF'JMFTBSFEJTUSJCVUFEVOEFS
    $SFBUJWF$PNNPOT $$
    "UUSJCVUJPO #:
    
    w ݪ࡞ऀͷΫϨδοτʢࢯ໊ɺ࡞඼λΠτϧͳͲʣΛදࣔ
    ͢Δ͜ͱΛओͳ৚݅ͱ͠ɺվม͸΋ͪΖΜɺӦར໨త
    Ͱͷೋ࣍ར༻΋ڐՄ͞ΕΔ࠷΋ࣗ༝౓ͷߴ͍$$ϥΠη
    ϯε IUUQTDSFBUJWFDPNNPOTKQMJDFOTFT
    
    

    View Slide

20. View Slide

21. ·ͱΊ
    

    View Slide

22. ·ͱΊ
    w -PUUJFͨͷ͍͠
    w ෳ਺ϓϥοτϑΥʔϜ J04"OESPJE
    ରԠخ͍͠
    w খن໛ΞϓϦPSݸਓΞϓϦͰ࣮ݧͯ͠ஈ֊తʹಋೖ
    w "#ςετͯ͠ΈΔͷΑͦ͞͏
    w "OJNBUJPOͰϢʔβʹGVOΛɻ
    

    View Slide

23. ,PUMJO΍͍͖͍ͬͯͨϑϨϯζ

    

    8&`3&)*3*/(
    
    

    View Slide

24. pOJTI
    
    

    View Slide