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
18k
デザイナーとエンジニアの距離をより近づける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.2k
Other Decks in Technology
See All in Technology
Copilot for Security を使った MDE / Sentinel のログ調査
sophiakunii
2
230
AWSの生成AIサービス入門 & 最強の書籍紹介!
minorun365
PRO
8
1.1k
Introducing Azure Automation Runtime Environment
mappie_kochi
0
190
工場IoTを実現するClassmethod PLC Data to Cloudのご紹介 | DevelopersIO 2024 福岡
cmakky
0
200
国連も推進する、デジタル公共財とは何か
halsk
1
440
現場の失敗から学ぶ!プロダクトバックログアイテムの改善/Learn_from_On-Site_Failures!_Improving_Product_Backlog_Items
m_iyama
3
930
GA technologiesの経営戦略から駆動するデータ基盤構築
pacocat
0
530
AWSアーキテクチャ図をスマートに描く方法をいろいろ試してみた
kiku3
0
180
Step Functionsと少し仲良くなってみた
masuchoku
1
110
[ABC2024Summer]Flutter UX Improvements + α
korodroid
0
290
俺的 Four Keys 解釈
tetsuya28
0
220
AWS re:Inforce 2024をおうちで楽しんでみた / Enjoyed AWS re:Inforce 2024 from home
yuj1osm
1
110
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
218
8.7k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Embracing the Ebb and Flow
colly
80
4.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
A Philosophy of Restraint
colly
199
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
24
1.7k
In The Pink: A Labor of Love
frogandcode
139
22k
Facilitating Awesome Meetings
lara
44
5.8k
Producing Creativity
orderedlist
PRO
339
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
88
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
359
22k
Practical Orchestrator
shlominoach
184
9.9k
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ΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ