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
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
170
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
110
非機能品質を作り込むための実践アーキテクチャ
knih
5
1.5k
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
360
ハイテク休憩
sat
PRO
2
170
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
480
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
270
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
100
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
560
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
生成AIのガバナンスの全体像と現実解
fnifni
1
190
Storage Browser for Amazon S3
miu_crescent
1
240

Featured

See All Featured
Into the Great Unknown - MozCon
thekraken
33
1.5k
Done Done
chrislema
181
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Six Lessons from altMBA
skipperchong
27
3.5k
Optimising Largest Contentful Paint
csswizardry
33
3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ