Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイナーとエンジニアの距離をより近づけるLottie利用術

Yuji Koyano
February 08, 2019
Technology
3
19k

 デザイナーとエンジニアの距離をより近づけるLottie利用術

16:50 から #room2 で行った「デザイナーとエンジニアの距離をより近づける Lottie 利用術」の資料です。

Yuji Koyano

February 08, 2019
Tweet

More Decks by Yuji Koyano

See All by Yuji Koyano
Coroutinesから紐解くKtorの仕組み / Revealing Ktor with coroutines
ykoyano
6
2.4k

Other Decks in Technology

See All in Technology
Lambdaと地方とコミュニティ
miu_crescent
2
370
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
The Rise of LLMOps
asei
7
1.4k
フルカイテン株式会社 採用資料
fullkaiten
0
40k
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
370
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Faster Mobile Websites
deanohume
305
30k
We Have a Design System, Now What?
morganepeng
50
7.2k
4 Signs Your Business is Dying
shpigford
180
21k
The Pragmatic Product Professional
lauravandoore
31
6.3k

Transcript

  1. σβΠφʔͱΤϯδχΞͷ ڑ཭Λ͚ۙͮΔ Lottie ར༻ज़ DroidKaigi 2019 
 02/08 (Fri.) 


    Recruit Lifestyle. Yuji Koyano

  2. ࣗݾ঺հ

  3. @bandwagondagon ykoyano Yuji Koyano @bandwagondagon ykoyano w 3FDSVJU-JGFTUZMFʹͯ
 "OESPJEΤϯδχΞͱͯ͠
 "JSϝΠτͱ͍͏ΞϓϦΛ։ൃத

    w ࠷ۙ͸Ͱ༡ͿͷʹϋϚͬͯ·͢

  4. Ξχϝʔγϣϯͷ։ൃίετ͸ߴ͍ w ࡉ෦ͷڞ༗΍ௐ੔͕೉͘͠
 σβΠφʔͱΤϯδχΞͷ
 ίϛχέʔγϣϯίετ͕ߴ͍ w ෳࡶͳΞχϝʔγϣϯΛ
 ίʔυͰ࠶ݱ͢Δͷ͸೉͍͠ w ϓϥοτϑΥʔϜຖʹ࣮૷͕ඞཁ

  5. $PQZSJHIU D "JSCOC

  6. Lottieͱ͸ʁ w "&Ͱ࡞੒͞ΕͨύεΞχϝʔγϣϯΛ
 ඳը͢ΔϥΠϒϥϦ w ֤ϓϥοτϑΥʔϜຖʹ࣮૷͕ଘࡏ
 "OESPJE J04 XFC 3FBDU/BUJWF

    FUD

  7. w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ w %ZOBNJD1SPQFSUZʹΑͬͯ
 ࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ w ྨࣅπʔϧͱൺֱͯ͠΋
 "&ͷΞχϝʔγϣϯػೳΛ
 ࠷΋ଟ͘αϙʔτ Lottieͷಛ௃

  8. Lottieͷ୅දతͳ࠶ੜύλʔϯ

  9. 1. ͦͷ··࠶ੜ͠ଓ͚Δ w ΦϯϘʔσΟϯάɾ΢ΥʔΫεϧʔͰ
 Α͘࢖ΘΕ͍ͯΔ w ϧʔϓ࠶ੜͰ࢖ΘΕΔ͜ͱ͕ଟ͍ w എܠಁաҎ֎ͷ໘Ͱ͸
 ௨ৗͷಈըͰ΋୅ସՄೳ

    $PQZSJHIU D "JSCOC

  10. 2. τϦΨʔʹ൓Ԡͯ͠࠶ੜ w ελϯϓ΍ϥΠΫͳͲͷ
 ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠
 Α͘࢖ΘΕΔ w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ
 ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍ $BSPMJOB$BKB[FJSB


    -JLF"OJNBUJPO

  11. 3. ࢝఺ͱऴ఺͕ঢ়ଶΛදݱ w 0/0''ͷ஋ͷঢ়ଶભҠΛදݱ͢Δ
 ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠
 ࢖ΘΕΔ͜ͱ͕ଟ͍ w ॱ࠶ੜɿ0''ˠ0/ͷભҠ
 ٯ࠶ੜɿ0/ˠ0''ͷભҠ %BSJT"MJ.VGUJ


    .FOVUP$MPTF.BUFSJBM*DPO

  12. 4. ෳ਺ͷ࠶ੜൣғΛ࣋ͭ w ఀࢭϙΠϯτΛෳ਺༻ҙͯ͠
 Ϣʔβʔͷಈ͖ʹରͯ͠
 ࠶ੜൣғΛมԽͤ͞Δ w ӈͷྫͰ͸ঢ়ଶؒͷભҠΛ
 ϞʔϑΟϯάͰදݱ $PQZSJHIU

    D "JSCOC

  13. w ΞχϝʔγϣϯΛͦͷ··
 ֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ
 σβΠφʔɾΤϯδχΞؒͷ
 ίϛχέʔγϣϯίετ͕Լ͕Δ w ඞཁͳ࣮૷͕γϯϓϧͰ
 ։ൃίετ͕௿͍ LottieΛ࢖͏ϝϦοτ

  14. w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞ w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ LottieΛ࢖͏ϝϦοτ

  15. ͜ͷηογϣϯͷ໨త w -PUUJFΛ࢖ͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕
 σβΠφʔͱҰॹʹ-PUUJFΛ
 ಋೖ͢Δ͖͔͚ͬΛ࡞Δ w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ
 σβΠφʔɾΤϯδχΞؒͷ
 ϫʔΫϑϩʔΛ͞Βʹޮ཰ԽͰ͖Δ

  16. ͜ͷηογϣϯͷ໨త w -PUUJFΛऔΓר͘؀ڥ w -PUUJF͕ಈ͘࢓૊Έ w ϫʔΫϑϩʔ5JQTͷ঺հ w Ξχϝʔγϣϯͷ࡞Γํ w

    ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏ w ΞϓϦͰͷ۩ମతͳ
 -PUUJFͷ࢖͍ॴ ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ

  17. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

  18. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  19. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  20. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  21. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  22. w ύεΞχϝʔγϣϯ΍7'9ͷ࡞੒ɾฤू͕Մೳͳө૾੍࡞ιϑτ Adobe After Effects (AE)

  23. w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ w 5IF"EPCF$PNNPO&YUFOTJCJMJUZ1MBUGPSN $&1 
 ্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ w &YUFOTJPOͷྫ
 ϝΠϯΧϥʔΛࢦఆ͢Δͱ૬ੑͷΑ͍৭Λࣗಈ഑৭


    ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛ௥Ճ ɹAdobe After Effects ͷಛ௃

  24. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  25. w "&ͷύεΞχϝʔγϣϯΛ
 ಠࣗͷσʔλߏ଄ʹม׵ͯ͠
 +40/ϑΝΠϧʹॻ͖ग़͢
 "&ͷ&YUFOTJPO w )FSOBO5PSSJTJࢯ
 ʹΑͬͯ։ൃ͞Εͨ044 Bodymovin

  26. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  27. 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" />

  28. lottie-android public class LottieAnimationView extends AppCompatImageView { public <T> void

    addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }

  29. lottie-android w αϯϓϧΞϓϦ͕ެ։த w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ
 ͱͯ͠࢖͏͜ͱ͕Ͱ͖Δ

  30. Lottiefiles.com

  31. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  32. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

  33. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  34. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  35. w "&ͷύεΞχϝʔγϣϯͷߏ੒ཁૉΛཧղ͢Δ Adobe After Effects (AE)

  36. w $PNQPTJUJPO
 1SF$PNQPTJUJPO
 -BZFS
 $POUFOU w ͜ΕΒͷཁૉͷϓϩύςΟΛ
 ࣌ؒ࣠Ͱ੍ޚͰ͖Δ
 FYϑϨʔϜ໨Ͱಁ໌౓Λʹ͢Δ ύεΞχϝʔγϣϯͷߏ੒ཁૉ

  37. w Ξχϝʔγϣϯ͸ͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ AE্ͷύεΞχϝʔγϣϯͷߏ଄ NBJO
 $PNQPTJUJPO "&ϑϩʔνϟʔτ

  38. AE্ͷύεΞχϝʔγϣϯͷߏ଄ w NBJO$PNQPTJUJPO͸1SF$PNQPTJUJPOͱ-BZFS͔Βߏ੒͞ΕΔ IFBSU
 -BZFS FYQMPTJPO
 1SF$PNQPTJUJPO

  39. AE্ͷύεΞχϝʔγϣϯͷߏ଄ w IFBSU-BZFS͸̎ͭͷ$POUFOU͔Βߏ੒͞ΕΔ 1BUI
 $POUFOU 'JMM
 $POUFOU

  40. TIPU
 -BZFS TIPU
 -BZFS AE্ͷύεΞχϝʔγϣϯͷߏ଄ w FYQMPTJPO1SF$PNQPTJUJPO͸̎ͭͷ-BZFS͔Βߏ੒͞ΕΔ

  41. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  42. Bodymovin w "&ͷΞχϝʔγϣϯΛߏ੒͢Δ
 ֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠
 w ཁૉͷΞΫηεʹ͸"&ͷ"1*Λར༻

  43. \ Wlz  GS ϑϨʔϜϨʔτ JQ ։࢝ϑϨʔϜ PQ ऴྃϑϨʔϜɹ X

    XJEUI I IFJHIU ONlNBJOz $PNQPTJUJPO໊ ʜ ^ ύεΞχϝʔγϣϯΛॻ͖ग़͢

  44. \ ʜ  lMBZFST< ʜIFBSU-BZFSͷ৘ใ ʜ$PNQPTJUJPOͷ৘ใ >  ʜ 

    ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢

  45. \ ʜ  lBTTFUT< ʜ1SF$PNQPTJUJPOͷ৘ใ >  ʜ  ^

    AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢

  46. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin

  47. -PUUJF"OJNBUJPO7JFX 1BSTFSΫϥε +40/
 ϑΝΠϧ

  48. -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO 1BSTFSΫϥε

  49. 1BSTFSΫϥε -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO .PEFMΫϥε "OJNBUJPOΫϥε

  50. -PUUJF$PNQPTJUJPO1BSTFS 
 -BZFS1BSTFS
 
 $POUFOU.PEFM1BSTFS
 
 "OJNBUBCMF5SBOTGPSN1BSTFS -BZFS
 
 $POUFOU.PEFM


    
 "OJNBUBCMF7BMVF 1BSTFSΫϥε .PEFMΫϥε

  51. -BZFS 
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO


    $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε "OJNBUJPOΫϥε

  52. -BZFS 
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO


    $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU

  53. -BZFS 
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF $PNQPTJUJPO-BZFS 4IBQF-BZFS 4IBQF$POUFOU 'JMM$POUFOU 1BUI,FZGSBNF"OJNBUJPO


    $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU͸
 ,FZ1BUIΫϥεܦ༝Ͱ
 ࣮ߦ࣌ʹ஋Λ
 มԽͤ͞Δ͜ͱ͕Ͱ͖Δ

  54. 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); } }

  55. 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); } }

  56. 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 }

  57. 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 }

  58. 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 }

  59. 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 }

  60. 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ߏ଄Λ೺ѲͰ͖Δͱ
 
 "&ͷͲͷཁૉʹ໰୊͕͋Δͷ͕
 ໌֬ʹͳΔͷͰσόοάͷޮ཰্͕͕Δ
 
 ࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͠΍͘͢ͳΔ

  61. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

  62. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  63. Ξχϝʔγϣϯͷ
 मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ
 ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin

  64. Ξχϝʔγϣϯͷ
 मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ
 ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ
 ख໭Γͷίετ΋ߴ͍ʂ

  65. Α͋͘ΔπϥΠ෦෼ w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ
 Ξχϝʔγϣϯͷҹ৅ʹࠩҟ͕ੜ͡Δ w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏ଄ͷڞ༗͕೉͍͠

  66. πʔϧؒͰͷύεσʔλͷಉظ w ɹ΍ͷεΫϦϓτ΍&YUFOTJPOΛ࢖ͬͯ
 ࣗಈԽͨ͠Γޮ཰Խ͢Δ w &YUFOTJPOʮ0WFSMPSEʯΛ࢖͏ͱ
 "*㲗"&ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ

  67. αϙʔτ͢ΔAEͷػೳͷࠩҟ w MPUUJF3/ɾqVUUFSͳͲ͸಺෦Ͱґଘ͍ͯ͠Δ
 MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰ஫ҙ w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕
 #PEZNPWJOͳͷ͔MPUUJFͳͷ͔Ͱ໰୊Λ੾Γ෼͚Δ w +40/ϑΝΠϧڞ༗ͷ଎౓Λ্͛ͯ
 αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ

  68. JSONϑΝΠϧڞ༗ͷ଎౓Λ্͛Δ w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ੒ w MPUUJFOPEFΛ࢖͑͹
 4FSWFSͰ΋-PUUJF͕࠶ੜՄೳ

  69. ϨΠϠʔߏ଄ͷڞ༗͕೉͍͠ w $PNQPTJUJPO -BZFS $POUFOUʹ
 ࣝผ͠΍໊͍͢લΛ͚ͭΔ w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ

  70. ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ w -PUUJFΛޮ཰తʹσόοά͢ΔͨΊͷ
 )ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠ w ΞϓϦΛϏϧυ͠௚͢͜ͱͳ͘
 ϓϩύςΟΛมߋͨ͠Γ
 ࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢ w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF

  71. DEMO

  72. ·ͱΊ

  73. -PUUJFͷར༻ύλʔϯ -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ

  74. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ

  75. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ