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
480
Bitriseことはじめ
marina1017
12
3.4k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Adaptive Systems
keathley
43
2.6k
Become a Pro
speakerdeck
PRO
28
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Writing Fast Ruby
sferik
628
61k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
We Have a Design System, Now What?
morganepeng
53
7.6k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠