Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ
Search
Marina Nakagawa
February 14, 2018
3
11k
Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ
Marina Nakagawa
February 14, 2018
Tweet
Share
More Decks by Marina Nakagawa
See All by Marina Nakagawa
業務改善の面白さ~毎日更新されるビジュアルコンテンツの差分を わかりやすくするためのプロトタイプを作るまで~
marina1017
4
6.5k
通知にプレースホルダーを入れてみたら開封率がちょっと良くなった話
marina1017
1
1.9k
アプリ流入用広告のデータ分析基盤を整える ~FirebaseとiAd.frameworkの連携~
marina1017
2
3.6k
ABテストが上手く行かなかった話
marina1017
1
570
「開発初心者は何がわからないのか」 わからないを言語化するヒント
marina1017
2
940
Appleのアニメーションはなぜ美しいか考える
marina1017
1
2.2k
Appleのアニメーション.pdf
marina1017
0
52
gitの裏側をさぐる
marina1017
0
470
Bitriseことはじめ
marina1017
12
3.4k
Featured
See All Featured
Designing for Performance
lara
608
69k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
YesSQL, Process and Tooling at Scale
rocio
172
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Speed Design
sergeychernyshev
30
970
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
184
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
79
Transcript
1 LottieʹΑΔϦονΞχϝʔγϣϯ࣮ͷͨΊͷ AfterEffectsϋϚΓͲ͜Ζ ຊܦࡁ৽ฉࣾɹத ສᣦಸ ୈೋճ iOS UI࣮ษڧձ
2 Marina Nakagawa @marina10172013 ຊܦࡁ৽ฉࣾͷiOSΤϯδχΞ ిࢠ൛ΞϓϦɼࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃ Adobe͖Ͱ͢
3 ຊ͢͜ͱ LottieͱAfter Effectsհ ͑ͳ͍ػೳ ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ 1 2 3 ͍͞͝ʹ
4
4 LottieͱAfterEffectsͱ 1
5 Lottieͱ Airbnb͕։ൃͨ͠iOS,Android,ReactNativeରԠͷ ΞχϝʔγϣϯϥΠϒϥϦ https://github.com/airbnb/lottie-ios
6 AfterEffectsͱ Adobe͕։ൃ͍ͯ͠Δಈըฤूιϑτ ϞʔγϣϯάϥϑΟοΫεͱVFXͷͨΊͷ ө૾ۀքඪ४πʔϧ
7 Ͳ͏ͯ͠Lottie͍͍ͷʁ
8 ৮ͬͯؾ࣋ͪͷ͍͍ΞχϝʔγϣϯΛ ϓϩάϥϜͰॻ͘ͷݫ͍͠
9 ɾϚεΫɹϚοτɹτϦϜύεɹμογϡύλʔϯ ͳͲͷػೳͷҰ෦Λαϙʔτͯ͠ͳ͍ Facebook Keyframes
10 ɾग़ྗαΠζ͕Bodymovin JSONͷ2ഒ ɾݻఆαΠζͰϨϯμϦϯά͞Εը໘αΠζʹ߹Θͤͯ ֦େͰ͖ͳ͍ Gif
11 ɾbodymovin jsonͷαΠζͷ30ʙ50ഒ ɾεέʔϧΞοϓͰ͖ͳ͍ͱ͍͏ͰɺgifΑΓΑ͘ͳ͍ PNG
12 Ͳ͏ͯ͠Lottie͍͍ͷʁ ͰLottieͳΒ
13 Ͳ͏ͯ͠Lottie͍͍ͷʁ After EffectsͰ࡞ͬͨϞʔγϣϯάϥϑΟοΫε͕ ؆୯ʹಋೖͰ͖Δʂ JSON
14 Ͳ͏ͯ͠Lottie͍͍ͷʁ AfterEffectsͰ࡞ͨ͠ΞχϝʔγϣϯΛ ίʔυ্Ͱ࣮ߦ࣌ʹมߋͰ͖Δ ←LottieެࣜυΩϡϝϯτΑΓ ίʔυͰ৭Λมߋ͍ͯ͠Δྫ http://airbnb.io/lottie/ios/dynamic.html
15 Ͳ͏ͯ͠Lottie͍͍ͷʁ ਆ
16 Ͳ͏ͯ͠Lottie͍͍ͷʁ ਆ Ξχϝʔγϣϯͷ࡞ΓํΛؒҧ͑ͳ͚Εɾɾɾ
17 After Effects Ͱಈը࡞ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը
18 After Effects Ͱಈը࡞ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը
ຊ͜͜ͷ٧·ΓͲ͜ΖΛհ͠·͢
19 After Effects Ͱಈը࡞ AEϓϥάΠϯ BodymovinͰ JSONग़ྗ ੍࡞ͷྲྀΕ iOSϥΠϒϥϦ LottieͰඳը
ຊ͜͜ͷ٧·ΓͲ͜ΖΛհ͠·͢ σβΠφʔ͞Μͱ૬ஊ͢Δࡍʹࢀߟʹ͍ͯͩ͘͠͞ ຊAfterEffectsͷؾΛ͚ͭͲ͜ΖΛհ
20 ͑ͳ͍ػೳ 2
21 After EffectsͷۄػೳΤϑΣΫτ͕͑ͳ͍ ೦ͳ͓Βͤ
22 ͪͳΈʹ͜Ε͕ΤϑΣΫτλϒ
23 ΤϯδχΞͰݴ͏ͱ ϥΠϒϥϦແ͠Ͱ৭ʑ࣮ͯ͠ ʹࣅͯΔ(ଟ)
24 ΤϑΣΫτʢάϩʔʣ͕͔͔Βͳ͍ Γ͔ͨͬͨදݱ ͨͱ͑ JSONͰग़ྗ͞Εͨͷ
25 جຊతʹ γΣΠϓϨΠϠʔ or AiSketchͰ࡞ͬͨϕΫλʔσʔλ ͷύεΛಈ͔ͯ͠ؤுΔ
26 ΤϑΣΫτҎ֎ʹͰ͖ͳ͍͜ͱ͋Δ
27 Strokes Gradientͷ߲ Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨͷ άϥσʔγϣϯΧϥʔ͕͔͔Βͳ͍
28 ύεʹԊͬͨํͷઃఆ͕Ͱ͖ͳ͍ Transforms Auto Orientͷ߲ ຊޠUIɿλΠϜϥΠϯΟϯυͰͦΕͧΕͷϨΠϠʔӈΫϦοΫ/τϥϯεϑΥʔϜ/ࣗಈํ BodymovinͰग़ྗͨ͠ͷҙਤ௨Γͷಈ͖Λ͍ͯ͠·ͨ͠ iOSAndroid্Ͱಈ͔ͦ͏ͱ͢Δͱ͏·͍͔͘ͳ͍ͷ͔ɾɾʁ(ະ֬ೝ) ύεͷ֯ʹԊͬͨҠಈ Γ͔ͨͬͨදݱ
JSONͰग़ྗ͞Εͨͷ
29 MasksAuto Orientͷ߲ ϚεΫͷϨΠϠʔͷ߹ϞʔυػೳͷະରԠ͕ଟ͍ AE্ͰॎํܗͷϚεΫΛઃఆ ҙਤͨ͠ϚεΫ͕ͳ͞Ε͍ͯͳ͍ Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨͷ
30 Masks ͜ͷลະରԠ MasksAuto Orientͷ߲ ϚεΫͷϨΠϠʔͷ߹ϞʔυػೳͷະରԠ͕ଟ͍
31 MasksAuto Orientͷ߲ ϚεΫͷ֦ுϚεΫͷڥք΅͔͠πʔϧ͕͑ͳ͍ Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨͷ
32 Merge Pathsͷ߲ ύεͷϞʔυมߋͰύεՃ͕Ͱ͖ͳ͍ Γ͔ͨͬͨදݱ JSONͰग़ྗ͞Εͨͷ ಛఆͷύεʹғ·Εͨͱ͜ΖΛग़ྗ͍ͨ͠ ύεશ͕ͯग़ྗ͞ΕΔ
33 Merge Pathsͷ߲ ͜ͷลະରԠ ύεͷϞʔυมߋͰύεՃ͕Ͱ͖ͳ͍
34 ͦͷଞͷ߲ iOSɾAndroidͩͱΤΫεϓϨογϣϯ͕͑ͳ͍ ΞχϝʔγϣϯΛ࡞͢Δ࣌ʹΩʔϑϨʔϜͰͳ͘,ίʔυ(ΤΫεϓϨογϣϯݴޠ)Ͱಈ͖Λ੍ޚ͢Δํ๏ ※BodymovinͰJSONͷॻ͖ग़͠Ͱ͖Δ͜ͱ֬ೝ͠·ͨ͠(webͰ͑Δͦ͏Ͱ͢)
35 ͦͷଞͷ߲ iOS࣌ؒ৳ॖͱλΠϜϦϚοϓ͕͑ͳ͍ ϨΠϠʔશମΛಉ͡ൺͰՃݮ͢Δ ϨΠϠʔͷ࣌ؒҰ෦ͷ֦େɺѹॖɼ ٯํ࠶ੜ·ͨఀࢭ͕Ͱ͖Δ 10ඵͷಈը 5ඵͷಈը ʹ͢Δ ࣌ؒѹॖ
λΠϜϦϚοϓ ϝϦϋϦΛ ͚͍ͭͨ ಛఆͷ෦ͷΛ ม͑Δ
36 ൵͍͜͠ͱʹͳΒͳ͍ͨΊʹ 3
37 ϞʔγϣϯΛ࡞Γ࢝ΊΔલʹ ͲͷAfterEffectsͷػೳΛ͔ͭ͏͔ ͦͷػೳBodymovinʹରԠͯ͠Δ͔֬ೝ͢Δ http://airbnb.io/lottie/supported-features.html ެࣜυΩϡϝϯτػೳରԠҰཡදˣ
38 ͪΐͪ͘ΐ͘ҙਤ௨Γͷग़ྗ͕Ͱ͖ͯΔ͔ ֬ೝ͢Δ
39 ֬ೝͷํ https://www.lottiefiles.com/ ʹΞΫηε ͜͜ΛΫϦοΫ
40 After Effects͔Βग़ྗͨ͠JSONΛೖΕΔ ֬ೝͷํ
41 ֬ೝͷํ Ξχϝʔγϣϯ͕ҙਤ௨Γಈ͍͍ͯΔ͔֬ೝͰ͖Δ
42 ࠷ޙʹ 4
43 ߦಈ͢ΔલʹυΩϡϝϯτΛ͔ͬ͠ΓಡΉ͖ͩͬͨ ͳΜͰ֬ೝେࣄ
44 ຊܦࡁ৽ฉࣾओ࠵ େखொSwiftษڧձͬͯ·͢
45 ͋Γ͕ͱ͏͍͟͝·ͨ͠