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

Transcript

1. 1 LottieʹΑΔϦονΞχϝʔγϣϯ࣮૷ͷͨΊͷ AfterEffectsϋϚΓͲ͜Ζ ೔ຊܦࡁ৽ฉࣾɹத઒ ສᣦಸ ୈೋճ iOS UI࣮૷ษڧձ
2. 2 Marina Nakagawa @marina10172013 ೔ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe੡඼޷͖Ͱ͢
3. 3 ຊ೔࿩͢͜ͱ LottieͱAfter Effects঺հ ࢖͑ͳ͍ػೳ ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ 1 2 3 ͍͞͝ʹ 4
4. 4 LottieͱAfterEffectsͱ͸ 1
5. 5 Lottieͱ͸ Airbnb͕։ൃͨ͠iOS,Android,ReactNativeରԠͷ ΞχϝʔγϣϯϥΠϒϥϦ https://github.com/airbnb/lottie-ios
6. 6 AfterEffectsͱ͸ Adobe͕։ൃ͍ͯ͠Δಈըฤूιϑτ ϞʔγϣϯάϥϑΟοΫεͱVFXͷͨΊͷ ө૾ۀքඪ४πʔϧ
7. 7 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ
8. 8 ৮ͬͯؾ࣋ͪͷ͍͍ΞχϝʔγϣϯΛ ϓϩάϥϜͰॻ͘ͷ͸ݫ͍͠
9. 9 ɾϚεΫɹϚοτɹτϦϜύεɹμογϡύλʔϯ ͳͲͷػೳͷҰ෦Λαϙʔτͯ͠ͳ͍ Facebook Keyframes
10. 10 ɾग़ྗαΠζ͕Bodymovin JSONͷ2ഒ ɾݻఆαΠζͰϨϯμϦϯά͞Εը໘αΠζʹ߹Θͤͯ ֦େͰ͖ͳ͍ Gif
11. 11 ɾbodymovin jsonͷαΠζͷ30ʙ50ഒ ɾεέʔϧΞοϓͰ͖ͳ͍ͱ͍͏఺ͰɺgifΑΓ΋Α͘ͳ͍ PNG
12. 12 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ Ͱ΋LottieͳΒ
13. 13 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ After EffectsͰ࡞ͬͨϞʔγϣϯάϥϑΟοΫε͕ ؆୯ʹಋೖͰ͖Δʂ JSON
14. 14 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ AfterEffectsͰ࡞੒ͨ͠ΞχϝʔγϣϯΛ ίʔυ্Ͱ࣮ߦ࣌ʹมߋͰ͖Δ ←LottieެࣜυΩϡϝϯτΑΓ
 ίʔυͰ৭Λมߋ͍ͯ͠Δྫ http://airbnb.io/lottie/ios/dynamic.html
15. 15 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ ਆ
16. 16 Ͳ͏ͯ͠Lottie͸͍͍ͷʁ ਆ Ξχϝʔγϣϯͷ࡞ΓํΛؒҧ͑ͳ͚Ε͹ɾɾɾ
17. 17 After Effects Ͱಈը࡞੒ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը
18. 18 After Effects Ͱಈը࡞੒ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը ຊ೔͸͜͜ͷ٧·ΓͲ͜ΖΛ঺հ͠·͢
19. 19 After Effects Ͱಈը࡞੒ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը ຊ೔͸͜͜ͷ٧·ΓͲ͜ΖΛ঺հ͠·͢ σβΠφʔ͞Μͱ૬ஊ͢Δࡍʹࢀߟʹ͍ͯͩ͘͠͞ ຊ೔͸AfterEffectsͷؾΛ͚ͭͲ͜ΖΛ঺հ
20. 20 ࢖͑ͳ͍ػೳ 2
21. 21 After Effectsͷ໨ۄػೳΤϑΣΫτ͕࢖͑ͳ͍ ࢒೦ͳ͓஌Βͤ
22. 22 ͪͳΈʹ͜Ε͕ΤϑΣΫτλϒ
23. 23 ΤϯδχΞͰݴ͏ͱ ϥΠϒϥϦແ͠Ͱ৭ʑ࣮૷ͯ͠ ʹࣅͯΔ(ଟ෼)
24. 24 ΤϑΣΫτʢάϩʔʣ͕͔͔Βͳ͍ ΍Γ͔ͨͬͨදݱ ͨͱ͑͹ JSONͰग़ྗ͞Εͨ΋ͷ
25. 25 جຊతʹ γΣΠϓϨΠϠʔ or Ai΍SketchͰ࡞ͬͨϕΫλʔσʔλ ͷύεΛಈ͔ͯ͠ؤுΔ
26. 26 ΤϑΣΫτҎ֎ʹ΋Ͱ͖ͳ͍͜ͱ͸͋Δ
27. 27 Strokes Gradientͷ߲໨ ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ άϥσʔγϣϯΧϥʔ͕͔͔Βͳ͍
28. 28 ύεʹԊͬͨํ޲ͷઃఆ͕Ͱ͖ͳ͍ Transforms Auto Orientͷ߲໨ ೔ຊޠUIɿλΠϜϥΠϯ΢Οϯυ΢ͰͦΕͧΕͷϨΠϠʔӈΫϦοΫ/τϥϯεϑΥʔϜ/ࣗಈํ޲ BodymovinͰग़ྗͨ͠΋ͷ͸ҙਤ௨Γͷಈ͖Λ͍ͯ͠·ͨ͠ iOS΍Android্Ͱಈ͔ͦ͏ͱ͢Δͱ͏·͍͔͘ͳ͍ͷ͔΋ɾɾʁ(ະ֬ೝ) ύεͷ֯౓ʹԊͬͨҠಈ ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
29. 29 MasksAuto Orientͷ߲໨ ϚεΫͷϨΠϠʔͷ߹੒ϞʔυػೳͷະରԠ͕ଟ͍ AE্Ͱॎ௕௕ํܗͷϚεΫΛઃఆ ҙਤͨ͠ϚεΫ͕ͳ͞Ε͍ͯͳ͍ ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
30. 30 Masks ͜ͷลະରԠ MasksAuto Orientͷ߲໨ ϚεΫͷϨΠϠʔͷ߹੒ϞʔυػೳͷະରԠ͕ଟ͍
31. 31 MasksAuto Orientͷ߲໨ ϚεΫͷ֦ு΍ϚεΫͷڥք΅͔͠πʔϧ͕࢖͑ͳ͍ ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ
32. 32 Merge Pathsͷ߲໨ ύεͷϞʔυมߋͰύεՃ޻͕Ͱ͖ͳ͍ ΍Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨ΋ͷ ಛఆͷύεʹғ·Εͨͱ͜ΖΛग़ྗ͍ͨ͠ ύεશ͕ͯग़ྗ͞ΕΔ
33. 33 Merge Pathsͷ߲໨ ͜ͷลະରԠ ύεͷϞʔυมߋͰύεՃ޻͕Ͱ͖ͳ͍
34. 34 ͦͷଞͷ߲໨ iOSɾAndroidͩͱΤΫεϓϨογϣϯ͕࢖͑ͳ͍ ΞχϝʔγϣϯΛ࡞੒͢Δ࣌ʹΩʔϑϨʔϜͰ͸ͳ͘,ίʔυ(ΤΫεϓϨογϣϯݴޠ)Ͱಈ͖Λ੍ޚ͢Δํ๏ ※BodymovinͰJSONͷॻ͖ग़͠͸Ͱ͖Δ͜ͱ͸֬ೝ͠·ͨ͠(webͰ͸࢖͑Δͦ͏Ͱ͢)
35. 35 ͦͷଞͷ߲໨ iOS͸࣌ؒ৳ॖͱλΠϜϦϚοϓ͕࢖͑ͳ͍ ϨΠϠʔશମΛಉ͡ൺ཰ͰՃݮ଎͢Δ ϨΠϠʔͷ࣌ؒҰ෦ͷ֦େɺѹॖɼ ٯํ޲࠶ੜ·ͨ͸ఀࢭ͕Ͱ͖Δ 10ඵͷಈը 5ඵͷಈը ʹ͢Δ ࣌ؒѹॖ λΠϜϦϚοϓ ϝϦϋϦΛ ͚͍ͭͨ ಛఆͷ෦෼ͷ଎౓Λ ม͑Δ
36. 36 ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ 3
37. 37 ϞʔγϣϯΛ࡞Γ࢝ΊΔલʹ ͲͷAfterEffectsͷػೳΛ͔ͭ͏͔ ͦͷػೳ͸BodymovinʹରԠͯ͠Δ͔֬ೝ͢Δ http://airbnb.io/lottie/supported-features.html ެࣜυΩϡϝϯτػೳରԠҰཡදˣ
38. 38 ͪΐͪ͘ΐ͘ҙਤ௨Γͷग़ྗ͕Ͱ͖ͯΔ͔ ֬ೝ͢Δ
39. 39 ֬ೝͷ࢓ํ https://www.lottiefiles.com/ ʹΞΫηε ͜͜ΛΫϦοΫ
40. 40 After Effects͔Βग़ྗͨ͠JSONΛೖΕΔ ֬ೝͷ࢓ํ
41. 41 ֬ೝͷ࢓ํ Ξχϝʔγϣϯ͕ҙਤ௨Γಈ͍͍ͯΔ͔֬ೝͰ͖Δ
42. 42 ࠷ޙʹ 4
43. 43 ߦಈ͢ΔલʹυΩϡϝϯτΛ͔ͬ͠ΓಡΉ΂͖ͩͬͨ ͳΜͰ΋֬ೝ͸େࣄ
44. 44 ೔ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձ΍ͬͯ·͢
45. 45 ͋Γ͕ͱ͏͍͟͝·ͨ͠