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
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
190
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
220
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
310
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
120
AWSで推進するデータマネジメント
kawanago
1
1.3k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.5k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Designing for Performance
lara
610
69k
Bash Introduction
62gerente
615
210k
Code Review Best Practice
trishagee
70
19k
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ΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ