Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dcebc7211303cb2ad89d7b011af920a1?s=47 Marina Nakagawa
February 14, 2018
8k

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

Dcebc7211303cb2ad89d7b011af920a1?s=128

Marina Nakagawa

February 14, 2018
Tweet

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 ͋Γ͕ͱ͏͍͟͝·ͨ͠