Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ

Transcript

1. 1
   LottieʹΑΔϦονΞχϝʔγϣϯ࣮૷ͷͨΊͷ
   AfterEffectsϋϚΓͲ͜Ζ
   ೔ຊܦࡁ৽ฉࣾɹத઒ ສᣦಸ
   ୈೋճ iOS UI࣮૷ษڧձ
   

   View Slide

2. 2
   Marina Nakagawa
   @marina10172013
   ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ
   ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ
   Adobe੡඼޷͖Ͱ͢
   

   View Slide

3. 3
   ຊ೔࿩͢͜ͱ
   LottieͱAfter Effects঺հ
   ࢖͑ͳ͍ػೳ
   ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ
   1
   2
   3
   ͍͞͝ʹ
   4
   

   View Slide

4. 4
   LottieͱAfterEffectsͱ͸
   1
   

   View Slide

5. 5
   Lottieͱ͸
   Airbnb͕։ൃͨ͠iOS,Android,ReactNativeରԠͷ
   ΞχϝʔγϣϯϥΠϒϥϦ
   https://github.com/airbnb/lottie-ios
   

   View Slide

6. 6
   AfterEffectsͱ͸
   Adobe͕։ൃ͍ͯ͠Δಈըฤूιϑτ
   ϞʔγϣϯάϥϑΟοΫεͱVFXͷͨΊͷ
   ө૾ۀքඪ४πʔϧ
   

   View Slide

7. 7
   Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
   

   View Slide

8. 8
   ৮ͬͯؾ࣋ͪͷ͍͍ΞχϝʔγϣϯΛ
   ϓϩάϥϜͰॻ͘ͷ͸ݫ͍͠
   

   View Slide

9. 9
   ɾϚεΫɹϚοτɹτϦϜύεɹμογϡύλʔϯ
   ͳͲͷػೳͷҰ෦Λαϙʔτͯ͠ͳ͍
   Facebook Keyframes
   

   View Slide

10. 10
    ɾग़ྗαΠζ͕Bodymovin JSONͷ2ഒ
    ɾݻఆαΠζͰϨϯμϦϯά͞Εը໘αΠζʹ߹Θͤͯ
    ֦େͰ͖ͳ͍
    Gif
    

    View Slide

11. 11
    ɾbodymovin jsonͷαΠζͷ30ʙ50ഒ
    ɾεέʔϧΞοϓͰ͖ͳ͍ͱ͍͏఺ͰɺgifΑΓ΋Α͘ͳ͍
    PNG
    

    View Slide

12. 12
    Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
    Ͱ΋LottieͳΒ
    

    View Slide

13. 13
    Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
    After EffectsͰ࡞ͬͨϞʔγϣϯάϥϑΟοΫε͕
    ؆୯ʹಋೖͰ͖Δʂ
    JSON
    

    View Slide

14. 14
    Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
    AfterEffectsͰ࡞੒ͨ͠ΞχϝʔγϣϯΛ
    ίʔυ্Ͱ࣮ߦ࣌ʹมߋͰ͖Δ
    ←LottieެࣜυΩϡϝϯτΑΓ

    ίʔυͰ৭Λมߋ͍ͯ͠Δྫ
    http://airbnb.io/lottie/ios/dynamic.html
    

    View Slide

15. 15
    Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
    ਆ
    

    View Slide

16. 16
    Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
    ਆ
    Ξχϝʔγϣϯͷ࡞ΓํΛؒҧ͑ͳ͚Ε͹ɾɾɾ
    

    View Slide

17. 17
    After Effects
    Ͱಈը࡞੒
    AEϓϥάΠϯ
    BodymovinͰ
    JSONग़ྗ
    ੍࡞ͷྲྀΕ
    iOSϥΠϒϥϦ
    LottieͰඳը
    

    View Slide

18. 18
    After Effects
    Ͱಈը࡞੒
    AEϓϥάΠϯ
    BodymovinͰ
    JSONग़ྗ
    ੍࡞ͷྲྀΕ
    iOSϥΠϒϥϦ
    LottieͰඳը
    ຊ೔͸͜͜ͷ٧·ΓͲ͜ΖΛ঺հ͠·͢
    

    View Slide

19. 19
    After Effects
    Ͱಈը࡞੒
    AEϓϥάΠϯ
    BodymovinͰ
    JSONग़ྗ
    ੍࡞ͷྲྀΕ
    iOSϥΠϒϥϦ
    LottieͰඳը
    ຊ೔͸͜͜ͷ٧·ΓͲ͜ΖΛ঺հ͠·͢
    σβΠφʔ͞Μͱ૬ஊ͢Δࡍʹࢀߟʹ͍ͯͩ͘͠͞
    ຊ೔͸AfterEffectsͷؾΛ͚ͭͲ͜ΖΛ঺հ
    

    View Slide

20. 20
    ࢖͑ͳ͍ػೳ
    2
    

    View Slide

21. 21
    After Effectsͷ໨ۄػೳΤϑΣΫτ͕࢖͑ͳ͍
    ࢒೦ͳ͓஌Βͤ
    

    View Slide

22. 22
    ͪͳΈʹ͜Ε͕ΤϑΣΫτλϒ
    

    View Slide

23. 23
    ΤϯδχΞͰݴ͏ͱ
    ϥΠϒϥϦແ͠Ͱ৭ʑ࣮૷ͯ͠ ʹࣅͯΔ(ଟ෼)
    

    View Slide

24. 24
    ΤϑΣΫτʢάϩʔʣ͕͔͔Βͳ͍
    ΍Γ͔ͨͬͨදݱ
    ͨͱ͑͹
    JSONͰग़ྗ͞Εͨ΋ͷ
    

    View Slide

25. 25
    جຊతʹ
    γΣΠϓϨΠϠʔ
    or
    Ai΍SketchͰ࡞ͬͨϕΫλʔσʔλ
    ͷύεΛಈ͔ͯ͠ؤுΔ
    

    View Slide

26. 26
    ΤϑΣΫτҎ֎ʹ΋Ͱ͖ͳ͍͜ͱ͸͋Δ
    

    View Slide

27. 27
    Strokes Gradientͷ߲໨
    ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
    άϥσʔγϣϯΧϥʔ͕͔͔Βͳ͍
    

    View Slide

28. 28
    ύεʹԊͬͨํ޲ͷઃఆ͕Ͱ͖ͳ͍
    Transforms Auto Orientͷ߲໨
    ೔ຊޠUIɿλΠϜϥΠϯ΢Οϯυ΢ͰͦΕͧΕͷϨΠϠʔӈΫϦοΫ/τϥϯεϑΥʔϜ/ࣗಈํ޲
    BodymovinͰग़ྗͨ͠΋ͷ͸ҙਤ௨Γͷಈ͖Λ͍ͯ͠·ͨ͠ iOS΍Android্Ͱಈ͔ͦ͏ͱ͢Δͱ͏·͍͔͘ͳ͍ͷ͔΋ɾɾʁ(ະ֬ೝ)
    ύεͷ֯౓ʹԊͬͨҠಈ
    ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
    

    View Slide

29. 29
    MasksAuto Orientͷ߲໨
    ϚεΫͷϨΠϠʔͷ߹੒ϞʔυػೳͷະରԠ͕ଟ͍
    AE্Ͱॎ௕௕ํܗͷϚεΫΛઃఆ ҙਤͨ͠ϚεΫ͕ͳ͞Ε͍ͯͳ͍
    ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
    

    View Slide

30. 30
    Masks
    ͜ͷลະରԠ
    MasksAuto Orientͷ߲໨
    ϚεΫͷϨΠϠʔͷ߹੒ϞʔυػೳͷະରԠ͕ଟ͍
    

    View Slide

31. 31
    MasksAuto Orientͷ߲໨
    ϚεΫͷ֦ு΍ϚεΫͷڥք΅͔͠πʔϧ͕࢖͑ͳ͍
    ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
    

    View Slide

32. 32
    Merge Pathsͷ߲໨
    ύεͷϞʔυมߋͰύεՃ޻͕Ͱ͖ͳ͍
    ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
    ಛఆͷύεʹғ·Εͨͱ͜ΖΛग़ྗ͍ͨ͠ ύεશ͕ͯग़ྗ͞ΕΔ
    

    View Slide

33. 33
    Merge Pathsͷ߲໨
    ͜ͷลະରԠ
    ύεͷϞʔυมߋͰύεՃ޻͕Ͱ͖ͳ͍
    

    View Slide

34. 34
    ͦͷଞͷ߲໨
    iOSɾAndroidͩͱΤΫεϓϨογϣϯ͕࢖͑ͳ͍
    ΞχϝʔγϣϯΛ࡞੒͢Δ࣌ʹΩʔϑϨʔϜͰ͸ͳ͘,ίʔυ(ΤΫεϓϨογϣϯݴޠ)Ͱಈ͖Λ੍ޚ͢Δํ๏
    ※BodymovinͰJSONͷॻ͖ग़͠͸Ͱ͖Δ͜ͱ͸֬ೝ͠·ͨ͠(webͰ͸࢖͑Δͦ͏Ͱ͢)
    

    View Slide

35. 35
    ͦͷଞͷ߲໨
    iOS͸࣌ؒ৳ॖͱλΠϜϦϚοϓ͕࢖͑ͳ͍
    ϨΠϠʔશମΛಉ͡ൺ཰ͰՃݮ଎͢Δ
    ϨΠϠʔͷ࣌ؒҰ෦ͷ֦େɺѹॖɼ
    ٯํ޲࠶ੜ·ͨ͸ఀࢭ͕Ͱ͖Δ
    10ඵͷಈը 5ඵͷಈը
    ʹ͢Δ
    ࣌ؒѹॖ λΠϜϦϚοϓ
    ϝϦϋϦΛ
    ͚͍ͭͨ
    ಛఆͷ෦෼ͷ଎౓Λ
    ม͑Δ
    

    View Slide

36. 36
    ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ
    3
    

    View Slide

37. 37
    ϞʔγϣϯΛ࡞Γ࢝ΊΔલʹ
    ͲͷAfterEffectsͷػೳΛ͔ͭ͏͔
    ͦͷػೳ͸BodymovinʹରԠͯ͠Δ͔֬ೝ͢Δ
    http://airbnb.io/lottie/supported-features.html
    ެࣜυΩϡϝϯτػೳରԠҰཡදˣ
    

    View Slide

38. 38
    ͪΐͪ͘ΐ͘ҙਤ௨Γͷग़ྗ͕Ͱ͖ͯΔ͔
    ֬ೝ͢Δ
    

    View Slide

39. 39
    ֬ೝͷ࢓ํ
    https://www.lottiefiles.com/ ʹΞΫηε
    ͜͜ΛΫϦοΫ
    

    View Slide

40. 40
    After Effects͔Βग़ྗͨ͠JSONΛೖΕΔ
    ֬ೝͷ࢓ํ
    

    View Slide

41. 41
    ֬ೝͷ࢓ํ
    Ξχϝʔγϣϯ͕ҙਤ௨Γಈ͍͍ͯΔ͔֬ೝͰ͖Δ
    

    View Slide

42. 42
    ࠷ޙʹ
    4
    

    View Slide

43. 43
    ߦಈ͢ΔલʹυΩϡϝϯτΛ͔ͬ͠ΓಡΉ΂͖ͩͬͨ
    ͳΜͰ΋֬ೝ͸େࣄ
    

    View Slide

44. 44
    ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢
    

    View Slide

45. 45
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide