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.6k
Other Decks in Technology
See All in Technology
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
200
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
450
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
610
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
220
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
180
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
フィンテック養成勉強会#54
finengine
0
180
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
306
45k
Raft: Consensus for Rubyists
vanstee
140
7k
Making Projects Easy
brettharned
116
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Unsuck your backbone
ammeep
671
58k
Building Adaptive Systems
keathley
43
2.6k
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
54
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Automating Front-end Workflow
addyosmani
1370
200k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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ΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ