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
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
230
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
6
750
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
データ分析エージェント Socrates の育て方
na0
8
2.7k
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
980
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Music & Morning Musume
bryan
46
6.8k
Embracing the Ebb and Flow
colly
87
4.8k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
RailsConf 2023
tenderlove
30
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Building an army of robots
kneath
306
46k
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ΛಡΈࠐΜͰ Ξχϝʔγϣϯඳը ύεΛ࡞Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ