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 Ai΍SketchͰ࡞ͬͨϕΫλʔσʔλ ͷύεΛಈ͔ͯ͠ؤுΔ

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Ͱग़ྗͨ͠΋ͷ͸ҙਤ௨Γͷಈ͖Λ͍ͯ͠·ͨ͠ iOS΍Android্Ͱಈ͔ͦ͏ͱ͢Δͱ͏·͍͔͘ͳ͍ͷ͔΋ɾɾʁ(ະ֬ೝ) ύεͷ֯౓ʹԊͬͨҠಈ ΍Γ͔ͨͬͨදݱ 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 ͋Γ͕ͱ͏͍͟͝·ͨ͠