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
10k
Lottieによるリッチアニメーション実装のためのAfterEffectsハマりどころ
Marina Nakagawa
February 14, 2018
Tweet
Share
More Decks by Marina Nakagawa
See All by Marina Nakagawa
業務改善の面白さ~毎日更新されるビジュアルコンテンツの差分を わかりやすくするためのプロトタイプを作るまで~
marina1017
4
6.1k
通知にプレースホルダーを入れてみたら開封率がちょっと良くなった話
marina1017
1
1.8k
アプリ流入用広告のデータ分析基盤を整える ~FirebaseとiAd.frameworkの連携~
marina1017
2
3.4k
ABテストが上手く行かなかった話
marina1017
1
560
「開発初心者は何がわからないのか」 わからないを言語化するヒント
marina1017
2
900
Appleのアニメーションはなぜ美しいか考える
marina1017
1
2k
Appleのアニメーション.pdf
marina1017
0
43
gitの裏側をさぐる
marina1017
0
450
Bitriseことはじめ
marina1017
12
3.3k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Writing Fast Ruby
sferik
627
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How STYLIGHT went responsive
nonsquared
95
5.2k
Optimizing for Happiness
mojombo
376
70k
Fireside Chat
paigeccino
34
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Typedesign – Prime Four
hannesfritz
40
2.4k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠