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利用術
Search
Yuji Koyano
February 08, 2019
Technology
3
20k
デザイナーとエンジニアの距離をより近づけるLottie利用術
16:50 から #room2 で行った「デザイナーとエンジニアの距離をより近づける Lottie 利用術」の資料です。
Yuji Koyano
February 08, 2019
Tweet
Share
More Decks by Yuji Koyano
See All by Yuji Koyano
Coroutinesから紐解くKtorの仕組み / Revealing Ktor with coroutines
ykoyano
6
2.7k
Other Decks in Technology
See All in Technology
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
100
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
200
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
250
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
130
今日からあなたもGeminiを好きになる
subaruhello
1
560
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
7
2.7k
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
190
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
380
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
180
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
110
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Review Best Practice
trishagee
69
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
Scaling GitHub
holman
461
140k
Transcript
σβΠφʔͱΤϯδχΞͷ ڑΛ͚ۙͮΔ Lottie ར༻ज़ DroidKaigi 2019 02/08 (Fri.)
Recruit Lifestyle. Yuji Koyano
ࣗݾհ
@bandwagondagon ykoyano Yuji Koyano @bandwagondagon ykoyano w 3FDSVJU-JGFTUZMFʹͯ "OESPJEΤϯδχΞͱͯ͠ "JSϝΠτͱ͍͏ΞϓϦΛ։ൃத
w ࠷ۙͰ༡ͿͷʹϋϚͬͯ·͢
Ξχϝʔγϣϯͷ։ൃίετߴ͍ w ࡉ෦ͷڞ༗ௐ͕͘͠ σβΠφʔͱΤϯδχΞͷ ίϛχέʔγϣϯίετ͕ߴ͍ w ෳࡶͳΞχϝʔγϣϯΛ ίʔυͰ࠶ݱ͢Δͷ͍͠ w ϓϥοτϑΥʔϜຖʹ࣮͕ඞཁ
$PQZSJHIU D "JSCOC
Lottieͱʁ w "&Ͱ࡞͞ΕͨύεΞχϝʔγϣϯΛ ඳը͢ΔϥΠϒϥϦ w ֤ϓϥοτϑΥʔϜຖʹ࣮͕ଘࡏ "OESPJE J04 XFC 3FBDU/BUJWF
FUD
w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ w %ZOBNJD1SPQFSUZʹΑͬͯ ࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ w ྨࣅπʔϧͱൺֱͯ͠ "&ͷΞχϝʔγϣϯػೳΛ ࠷ଟ͘αϙʔτ Lottieͷಛ
Lottieͷදతͳ࠶ੜύλʔϯ
1. ͦͷ··࠶ੜ͠ଓ͚Δ w ΦϯϘʔσΟϯάɾΥʔΫεϧʔͰ Α͘ΘΕ͍ͯΔ w ϧʔϓ࠶ੜͰΘΕΔ͜ͱ͕ଟ͍ w എܠಁաҎ֎ͷ໘Ͱ ௨ৗͷಈըͰସՄೳ
$PQZSJHIU D "JSCOC
2. τϦΨʔʹԠͯ͠࠶ੜ w ελϯϓϥΠΫͳͲͷ ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠ Α͘ΘΕΔ w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍ $BSPMJOB$BKB[FJSB
-JLF"OJNBUJPO
3. ࢝ͱऴ͕ঢ়ଶΛදݱ w 0/0''ͷͷঢ়ଶભҠΛදݱ͢Δ ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠ ΘΕΔ͜ͱ͕ଟ͍ w ॱ࠶ੜɿ0''ˠ0/ͷભҠ ٯ࠶ੜɿ0/ˠ0''ͷભҠ %BSJT"MJ.VGUJ
.FOVUP$MPTF.BUFSJBM*DPO
4. ෳͷ࠶ੜൣғΛ࣋ͭ w ఀࢭϙΠϯτΛෳ༻ҙͯ͠ Ϣʔβʔͷಈ͖ʹରͯ͠ ࠶ੜൣғΛมԽͤ͞Δ w ӈͷྫͰঢ়ଶؒͷભҠΛ ϞʔϑΟϯάͰදݱ $PQZSJHIU
D "JSCOC
w ΞχϝʔγϣϯΛͦͷ·· ֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ σβΠφʔɾΤϯδχΞؒͷ ίϛχέʔγϣϯίετ͕Լ͕Δ w ඞཁͳ࣮͕γϯϓϧͰ ։ൃίετ͕͍ LottieΛ͏ϝϦοτ
w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞ w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ LottieΛ͏ϝϦοτ
͜ͷηογϣϯͷత w -PUUJFΛͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕ σβΠφʔͱҰॹʹ-PUUJFΛ ಋೖ͢Δ͖͔͚ͬΛ࡞Δ w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ σβΠφʔɾΤϯδχΞؒͷ ϫʔΫϑϩʔΛ͞ΒʹޮԽͰ͖Δ
͜ͷηογϣϯͷత w -PUUJFΛऔΓר͘ڥ w -PUUJF͕ಈ͘Έ w ϫʔΫϑϩʔ5JQTͷհ w Ξχϝʔγϣϯͷ࡞Γํ w
ΞϓϦͰͷ-PUUJFͷ࣮ํ๏ w ΞϓϦͰͷ۩ମతͳ -PUUJFͷ͍ॴ ͢͜ͱ ͞ͳ͍͜ͱ
-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘Έ -PUUJFΛऔΓר͘ڥ
ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
w ύεΞχϝʔγϣϯ7'9ͷ࡞ɾฤू͕Մೳͳө૾੍࡞ιϑτ Adobe After Effects (AE)
w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ w 5IF"EPCF$PNNPO&YUFOTJCJMJUZ1MBUGPSN $&1 ্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ w &YUFOTJPOͷྫ ϝΠϯΧϥʔΛࢦఆ͢Δͱ૬ੑͷΑ͍৭Λࣗಈ৭
ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛՃ ɹAdobe After Effects ͷಛ
ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
w "&ͷύεΞχϝʔγϣϯΛ ಠࣗͷσʔλߏʹมͯ͠ +40/ϑΝΠϧʹॻ͖ग़͢ "&ͷ&YUFOTJPO w )FSOBO5PSSJTJࢯ ʹΑͬͯ։ൃ͞Εͨ044 Bodymovin
ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
lottie-android w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ w ҎԼͷํ๏ͷ ಡΈࠐΈΛαϙʔτ +40/ϑΝΠϧ ;*1ϑΝΠϧ ωοτϫʔΫܦ༝
<com.airbnb.lottie.LottieAnimationView android:layout_width="match_parent" android:layout_height=“wrap_content” app:lottie_rawRes="@raw/hello_world" app:lottie_fileName="hello_world.json" app:lottie_autoPlay=“true" />
lottie-android public class LottieAnimationView extends AppCompatImageView { public <T> void
addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
lottie-android w αϯϓϧΞϓϦ͕ެ։த w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ ͱͯ͠͏͜ͱ͕Ͱ͖Δ
Lottiefiles.com
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘Έ -PUUJFΛऔΓר͘ڥ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
w "&ͷύεΞχϝʔγϣϯͷߏཁૉΛཧղ͢Δ Adobe After Effects (AE)
w $PNQPTJUJPO 1SF$PNQPTJUJPO -BZFS $POUFOU w ͜ΕΒͷཁૉͷϓϩύςΟΛ ࣌ؒ࣠Ͱ੍ޚͰ͖Δ FYϑϨʔϜͰಁ໌Λʹ͢Δ ύεΞχϝʔγϣϯͷߏཁૉ
w Ξχϝʔγϣϯͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ AE্ͷύεΞχϝʔγϣϯͷߏ NBJO $PNQPTJUJPO "&ϑϩʔνϟʔτ
AE্ͷύεΞχϝʔγϣϯͷߏ w NBJO$PNQPTJUJPO1SF$PNQPTJUJPOͱ-BZFS͔Βߏ͞ΕΔ IFBSU -BZFS FYQMPTJPO 1SF$PNQPTJUJPO
AE্ͷύεΞχϝʔγϣϯͷߏ w IFBSU-BZFS̎ͭͷ$POUFOU͔Βߏ͞ΕΔ 1BUI $POUFOU 'JMM $POUFOU
TIPU -BZFS TIPU -BZFS AE্ͷύεΞχϝʔγϣϯͷߏ w FYQMPTJPO1SF$PNQPTJUJPO̎ͭͷ-BZFS͔Βߏ͞ΕΔ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
Bodymovin w "&ͷΞχϝʔγϣϯΛߏ͢Δ ֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠ w ཁૉͷΞΫηεʹ"&ͷ"1*Λར༻
\ Wlz GS ϑϨʔϜϨʔτ JQ ։࢝ϑϨʔϜ PQ ऴྃϑϨʔϜɹ X
XJEUI I IFJHIU ONlNBJOz $PNQPTJUJPO໊ ʜ ^ ύεΞχϝʔγϣϯΛॻ͖ग़͢
\ ʜ lMBZFST< ʜIFBSU-BZFSͷใ ʜ$PNQPTJUJPOͷใ > ʜ
^ AE্ͷύεΞχϝʔγϣϯͷߏ ύεΞχϝʔγϣϯΛॻ͖ग़͢
\ ʜ lBTTFUT< ʜ1SF$PNQPTJUJPOͷใ > ʜ ^
AE্ͷύεΞχϝʔγϣϯͷߏ ύεΞχϝʔγϣϯΛॻ͖ग़͢
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
-PUUJF"OJNBUJPO7JFX 1BSTFSΫϥε +40/ ϑΝΠϧ
-PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO 1BSTFSΫϥε
1BSTFSΫϥε -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO .PEFMΫϥε "OJNBUJPOΫϥε
-PUUJF$PNQPTJUJPO1BSTFS -BZFS1BSTFS $POUFOU.PEFM1BSTFS "OJNBUBCMF5SBOTGPSN1BSTFS -BZFS $POUFOU.PEFM
"OJNBUBCMF7BMVF 1BSTFSΫϥε .PEFMΫϥε
-BZFS $POUFOU.PEFM "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO
$PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε "OJNBUJPOΫϥε
-BZFS $POUFOU.PEFM "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO
$PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU
-BZFS $POUFOU.PEFM "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO
$PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU ,FZ1BUIΫϥεܦ༝Ͱ ࣮ߦ࣌ʹΛ มԽͤ͞Δ͜ͱ͕Ͱ͖Δ
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
CompositionLayer ↓ Layer ↓ ContentModel ↓ ShapeFill ↓ AnimatableValue
Content ↓ FillContent ↓ KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress } "&ͷ,FZ1BUIߏΛѲͰ͖Δͱ "&ͷͲͷཁૉʹ͕͋Δͷ͕ ໌֬ʹͳΔͷͰσόοάͷޮ্͕͕Δ ࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͘͢͠ͳΔ
-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘Έ -PUUJFΛऔΓר͘ڥ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
Ξχϝʔγϣϯͷ मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin
Ξχϝʔγϣϯͷ मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ खΓͷίετߴ͍ʂ
Α͋͘ΔπϥΠ෦ w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ Ξχϝʔγϣϯͷҹʹࠩҟ͕ੜ͡Δ w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏͷڞ༗͕͍͠
πʔϧؒͰͷύεσʔλͷಉظ w ɹͷεΫϦϓτ&YUFOTJPOΛͬͯ ࣗಈԽͨ͠ΓޮԽ͢Δ w &YUFOTJPOʮ0WFSMPSEʯΛ͏ͱ "*㲗"&ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ
αϙʔτ͢ΔAEͷػೳͷࠩҟ w MPUUJF3/ɾqVUUFSͳͲ෦Ͱґଘ͍ͯ͠Δ MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰҙ w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕ #PEZNPWJOͳͷ͔MPUUJFͳͷ͔ͰΛΓ͚Δ w +40/ϑΝΠϧڞ༗ͷΛ্͛ͯ αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ
JSONϑΝΠϧڞ༗ͷΛ্͛Δ w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ w MPUUJFOPEFΛ͑ 4FSWFSͰ-PUUJF͕࠶ੜՄೳ
ϨΠϠʔߏͷڞ༗͕͍͠ w $PNQPTJUJPO -BZFS $POUFOUʹ ࣝผ໊͍͢͠લΛ͚ͭΔ w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ
ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ w -PUUJFΛޮతʹσόοά͢ΔͨΊͷ )ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠ w ΞϓϦΛϏϧυ͢͜͠ͱͳ͘ ϓϩύςΟΛมߋͨ͠Γ ࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢ w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF
DEMO
·ͱΊ
-PUUJFͷར༻ύλʔϯ -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘Έ -PUUJFΛऔΓר͘ڥ
Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ