bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エコシステム

2017年5月27日 『初夏の JavaScript 祭 in mixi』にて発表した資料です。

Transcript

1. CPEZNPWJO º -PUUJF ϚϧνσόΠεʹରԠͨ͠
   47(
   ΞχϝʔγϣϯɾΤίγεςϜ - SVG animation ecosystem supporting multiple devices -  /BPLJ
   :"."%" !XBLBNTIB ॳՆͷ
   +BWB4DSJQU
   ࡇ
   JO
   NJYJ
2. - What’s bodymovin ? - - bodymovin ͬͯԿʁ -
3. - What’s bodymovin ? - "EPCF
   "GUFS
   &⒎FDUT
   Ͱ੍࡞ͨ͠ΞχϝʔγϣϯσʔλΛ
   +40/
   ܗࣜͰॻ͖ग़͢
   "GUFS
   &⒎FDUT
   ϓϥάΠϯ
4. - What’s bodymovin ? - ॻ͖ग़͞Εͨ
   +40/
   Λ
   47(
   Ξχϝʔγϣϯͱͯ͠࠶ੜͰ͖Δ
   +BWB4DSJQU
   ϥΠϒϥϦ
5. - Basic Example - - ಈ͔ͯ͠ΈΑ͏ -
6. - Basic Example -
7. - Basic Example -
8. CPEZNPWJO w "&
   ͷ֤छϒϨϯυϞʔυʹରԠ
   w ςΩετσʔλͷϨϯμϦϯάʹ΋ରԠ
   w 47(
   ͸ϕΫλʔσʔλͳͷͰղ૾౓ʹґଘ͠ͳ͍
   w "GUFS
   &⒎FDUT
   ͷߴ͍දݱྗΛͦͷ··
   XFC
   ϒϥ΢β্Ͱ දݱͰ͖Δ
9. 0OF
   NPSF
   UIJOH
   ʜ ͔͜͜Β͕ຊ൪ 
   ͔Βͷʜ
   
10. - What’s Lottie ? - - Lottie ͱ͸Ұମʁ -
11. -PUUJF w CPEZNPWJO
    Ͱॻ͖ग़͞Εͨ
    +40/
    ΛωΠςΟϒΞϓϦέʔ γϣϯͰಈ࡞ͤ͞ΔϓϥάΠϯ
    w J04
    
    "OESPJE
    
    3FBDU/BUJWF
    ʹରԠࡁΈ
    w "JSCOC
    ʹΑΔΦʔϓϯιʔε
13. - Basic Examples - - ಈ͔ͯ͠ΈΑ͏ -
14. - Basic Examples -
15. "T
    B
    QPJOU
    PG
    OPUF w ϏοτϚοϓσʔλؚ͕·Ε͍ͯΔͱਖ਼ৗʹಈ࡞͠ͳ͍
    w ίϯϙδγϣϯ͕ωετ͍ͯ͠ΔͱΞχϝʔγϣϯ͕ਖ਼ৗʹ ಈ࡞͠ͳ͍
    
    ˞
    -PUUJF
    ʹͯ
    
    w ϓϦϩʔμʔ΍ΞΠίϯͱ͍ͬͨখن໛ͳΞχϝʔγϣϯ͕ ༻్ͱͯ͠ద੾
16. *OUSPEVDF
    NZTFMG Զͷ໊લΛݴͬͯΈΖ 
    ࣗݾ঺հ
    
17. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    XFC
    ϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ
    :"."%" 
    *OUSPEVDF
    NZTFMG
     !XBLBNTIB
18. https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
20. https://tech.recruit-mp.co.jp 3.1 ϒϩά
21. 5IBOL
    ZPV