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
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
260
業務改善の面白さ~毎日更新されるビジュアルコンテンツの差分を わかりやすくするためのプロトタイプを作るまで~
marina1017
4
6.7k
通知にプレースホルダーを入れてみたら開封率がちょっと良くなった話
marina1017
1
1.9k
アプリ流入用広告のデータ分析基盤を整える ~FirebaseとiAd.frameworkの連携~
marina1017
2
3.6k
ABテストが上手く行かなかった話
marina1017
1
610
「開発初心者は何がわからないのか」 わからないを言語化するヒント
marina1017
2
960
Appleのアニメーションはなぜ美しいか考える
marina1017
1
2.2k
Appleのアニメーション.pdf
marina1017
0
54
gitの裏側をさぐる
marina1017
0
480
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How STYLIGHT went responsive
nonsquared
100
5.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Navigating Team Friction
lara
189
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Six Lessons from altMBA
skipperchong
28
4k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠