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