SVG アニメーション

SVG アニメーションを実装するにあたり、辛いところ、気をつけたほうがいいところを紹介します。

ブログで紹介されました
https://inside.dmm.com/entry/2017/11/28-fe-lt-vol1

Transcript

1. 47(Ξχϝʔγϣϯ
   %..DPNϥϘϑϩϯτΤϯυ։ൃ෦
   ∁ాᠳଠ
   ΢ΣσΟϯάύʔΫ✕%..DPNϥϘ߹ಉ-5ձ
   

   View Slide

2. ࣗݾ঺հ
   ∁ాᠳଠ
   ϑϩϯτΤϯυ։ൃ෦ୈ(
   ಈը഑৴ࣄۀ෦෇͚
   ࣾձਓ೥໨
   

   View Slide

3. ࠓճ࿩͢͜ͱ
   47(ͷ͓͞Β͍
   47(Ξχϝʔγϣϯͷྫ
   47(ΞχϝʔγϣϯͷͭΒΈ
   

   View Slide

4. 47(ͷ͓͞Β͍
   

   View Slide

5. 47(ͷ͓͞Β͍
   w 4DBMBCMF7FDUPS(SBQIJDTͷུ
   w 9.-ܗࣜͰهड़͞ΕΔը૾ϑΥʔϚοτ
   w ϕΫλʔΠϝʔδ༻ͷܗࣜͰදݱ͞ΕΔͨΊ֦େॖখʹڧ͍
   

   View Slide

6. ฐࣾͰͷ࣮૷ྫ
   

   View Slide

7. ฐࣾͰͷ࣮૷ྫ
   

   View Slide

8. 47(ͷͳ͔Έ
   QBUI
   E. D T
   
   
   
   
   QPMZHPOQPJOUT
   
   
   

   View Slide

9. 47(Ξχϝʔγϣϯͷྫ
   

   View Slide

10. 47(Ξχϝʔγϣϯͷྫ
    ετϩʔΫΞχϝʔγϣϯ
    w IUUQTDPEFQFOJP4IUB@8XXQFOK(WF,/
    FEJUPST
    w QBUIΛTUSPLFEBTIBSSBZϓϩύςΟͰഁઢͷࢦఆ
    w TUSPLFEBTIP⒎TFUϓϩύςΟͷ஋Λஞ࣍తʹมߋ
    

    View Slide

11. 47(Ξχϝʔγϣϯͷྫ
    ϞʔϑΟϯά
    w IUUQTDPEFQFOJP4IUB@8XXQFO1+-;NH
    w QBUIͷEଐੑΛஞ࣍తʹมߋ
    

    View Slide

12. 47(Ξχϝʔγϣϯͷྫ
    Πʔδϯά
    w IUUQTDPEFQFOJP4IUB@8XXQFO3-&+2,
    FEJUPST
    w ୯Ґ࣌ؒ͋ͨΓͷมԽͷׂ߹
    

    View Slide

13. 47(ΞχϝʔγϣϯͷͭΒΈ
    

    View Slide

14. 47(ΞχϝʔγϣϯͷͭΒΈ
    w QBUI
    w QPMZHPO
    w TUSPLF⒎G
    w HH
    w E
    w WJFX#PYz
    w WJFX1PSU
    w ݪ࢝ϑΟϧλʔ
    ݟ׳Εͳ͍ཁૉ΍ଐੑ͕ଟ͍
    w EFGT
    w GF(BVTTJBO#MVSJOIPHF
    TUE%FWJBUJPOSFTVMUlGVHB
    w GF0⒎TFUJOGVHBEYEZQJZPz
    w GF.FSHFGF.BSHF
    w TZNCPMTZNCPM
    w VTF
    w UFYU1BUIUFYU1BUI
    

    View Slide

15. 47(ΞχϝʔγϣϯͷͭΒΈ
    ϨΠϠʔ໊೔ຊޠ໰୊
    

    View Slide

16. 47(ΞχϝʔγϣϯͷͭΒΈ
    ϨΠϠʔ໊೔ຊޠ໰୊
    TWHYNMOTIUUQXXXXPSHTWHWJFX#PYǒ
    UJUMFΞηοτ 5UJUMF
    HJEՔԌՌդ@EBUBOBNFՔԌՌդ
    HJEՔԌՌդ@EBUBOBNFՔԌՌդ
    QBUIDMBTTDMTE. )
    H
    H
    TWH
    

    View Slide

17. 47(ΞχϝʔγϣϯͷͭΒΈ
    47(ʹํ޲͕͋Δ
    

    View Slide

18. 47(ΞχϝʔγϣϯͷͭΒΈ
    QBUIDMBTTDMTE. )
    

    View Slide

19. 47(ΞχϝʔγϣϯͷͭΒΈ
    QBUIDMBTTDMTE. )
    QBUIDMBTTDMTE. )
    

    View Slide

20. ͭΒ͘ͳΒͳ͍ͨΊʹ
    

    View Slide

21. ͭΒ͘ͳΒͳ͍ͨΊʹ
    σβΠφʔ
    w ύεͷํ޲Λἧ͑Δ
    w ϨΠϠʔͷ੔ཧΛ͢Δ
    w Πϥετ͕ͲͷΑ͏ͳ47(ʢίʔυʣʹͳΔͷ͔Λ஌͓ͬͯ͘
    ΤϯδχΞ
    w ΦʔαϦϯάπʔϧͷཧղ
    w ΞχϝʔγϣϯܥͷϥΠϒϥϦͷ஌ࣝ
    w ༻ޠͷཧղ
    

    View Slide

22. ຯํʹ͚ͭΕ͹ҹ৅తͳ
    Ξχϝʔγϣϯ͕࡞ΕΔ
    

    View Slide

23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

24. (4"1
    IUUQTHSFFOTPDLDPNHTBQ
    BOJNFKT
    IUUQBOJNFKTDPN
    *MMVTUSBUPSͰ47(Ξχϝʔγϣϯ༻ͷ47(ϑΝΠϧΛ࡞ͬͯΈͨ
    IUUQTMJHJODDPKQ
    TWHཁૉͷجຊతͳ࢖͍ํ·ͱΊ
    IUUQEFGHIJIUNMYEPNBJOKQUFDITWH.FNPTWH.FNPIUN
    

    View Slide