SVG アニメーション

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

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

Transcript

1. 47(
   Ξχϝʔγϣϯ %..DPNϥϘ
   ϑϩϯτΤϯυ։ൃ෦
   ∁ా
   ᠳଠ ΢ΣσΟϯάύʔΫ
   ✕
   %..DPNϥϘ
   ߹ಉ-5ձ
2. ࣗݾ঺հ ∁ాᠳଠ
   ϑϩϯτΤϯυ։ൃ෦ୈ(
   ಈը഑৴ࣄۀ෦෇͚
   ࣾձਓ೥໨
3. ࠓճ࿩͢͜ͱ  47(ͷ͓͞Β͍
    47(Ξχϝʔγϣϯͷྫ
    47(ΞχϝʔγϣϯͷͭΒΈ
4. 47(ͷ͓͞Β͍
5. 47(ͷ͓͞Β͍ w 4DBMBCMF
   7FDUPS
   (SBQIJDT
   ͷུ
   w 9.-ܗࣜͰهड़͞ΕΔը૾ϑΥʔϚοτ
   w ϕΫλʔΠϝʔδ༻ͷܗࣜͰදݱ͞ΕΔͨΊ֦େॖখʹڧ͍
6. ฐࣾͰͷ࣮૷ྫ
7. ฐࣾͰͷ࣮૷ྫ
8. 47(ͷͳ͔Έ QBUI
   
   E. D     T                            
    QPMZHPO
   QPJOUT
   
   
   
   
   
   
   
   
   
   
   
9. 47(Ξχϝʔγϣϯͷྫ
10. 47(Ξχϝʔγϣϯͷྫ ετϩʔΫΞχϝʔγϣϯ
    w IUUQTDPEFQFOJP4IUB@8XXQFOK(WF,/ FEJUPST
    w QBUI
    Λ
    TUSPLFEBTIBSSBZ
    ϓϩύςΟͰഁઢͷࢦఆ
    w TUSPLFEBTIP⒎TFU
    ϓϩύςΟͷ஋Λஞ࣍తʹมߋ
11. 47(Ξχϝʔγϣϯͷྫ ϞʔϑΟϯά
    w IUUQTDPEFQFOJP4IUB@8XXQFO1+-;NH
    w QBUI
    ͷ
    E
    ଐੑΛஞ࣍తʹมߋ
12. 47(Ξχϝʔγϣϯͷྫ Πʔδϯά
    w IUUQTDPEFQFOJP4IUB@8XXQFO3-&+2, FEJUPST
    w ୯Ґ࣌ؒ͋ͨΓͷมԽͷׂ߹
13. 47(ΞχϝʔγϣϯͷͭΒΈ
14. 47(ΞχϝʔγϣϯͷͭΒΈ w QBUI
    w QPMZHPO
    w TUSPLF
    ⒎G
    w HH
    w E
    w WJFX#PY
    
    
    z
    w WJFX1PSU
    w ݪ࢝ϑΟϧλʔ ݟ׳Εͳ͍ཁૉ΍ଐੑ͕ଟ͍ w EFGT
    w GF(BVTTJBO#MVS
    JOIPHF
    TUE%FWJBUJPO
    SFTVMUlGVHB
    w GF0⒎TFU
    JOGVHB
    EY
    EZ
    QJZPz
    w GF.FSHFGF.BSHF
    w TZNCPMTZNCPM
    w VTF
    w UFYU1BUIUFYU1BUI
15. 47(ΞχϝʔγϣϯͷͭΒΈ ϨΠϠʔ໊೔ຊޠ໰୊
16. 47(ΞχϝʔγϣϯͷͭΒΈ ϨΠϠʔ໊೔ຊޠ໰୊ TWH
    YNMOTIUUQXXXXPSHTWH
    WJFX#PY
    
    
    ǒ
    
    
    
    
    UJUMFΞηοτ 5UJUMF
    
    
    
    
    H
    JEՔԌՌդ@
    EBUBOBNFՔԌՌդ
    
    
    
    
    
    
    
    
    
    H
    JEՔԌՌդ@
    EBUBOBNFՔԌՌդ
    
    
    
    
    
    
    
    
    
    
    
    
    
    QBUI
    DMBTTDMT
    E. )
    
    
    
    
    
    
    
    
    
    H
    
    
    
    
    H
    TWH
17. 47(ΞχϝʔγϣϯͷͭΒΈ 47(ʹํ޲͕͋Δ
18. 47(ΞχϝʔγϣϯͷͭΒΈ QBUI
    DMBTTDMT
    E. )
19. 47(ΞχϝʔγϣϯͷͭΒΈ QBUI
    DMBTTDMT
    E. ) QBUI
    DMBTTDMT
    E. )
20. ͭΒ͘ͳΒͳ͍ͨΊʹ
21. ͭΒ͘ͳΒͳ͍ͨΊʹ σβΠφʔ
    w ύεͷํ޲Λἧ͑Δ
    w ϨΠϠʔͷ੔ཧΛ͢Δ
    w Πϥετ͕ͲͷΑ͏ͳ
    47(ʢίʔυʣʹͳΔͷ͔Λ஌͓ͬͯ͘
    ΤϯδχΞ
    w ΦʔαϦϯάπʔϧͷཧղ
    w ΞχϝʔγϣϯܥͷϥΠϒϥϦͷ஌ࣝ
    w ༻ޠͷཧղ
22. ຯํʹ͚ͭΕ͹ҹ৅తͳ
    Ξχϝʔγϣϯ͕࡞ΕΔ
23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
24. (4"1
    IUUQTHSFFOTPDLDPNHTBQ
    BOJNFKT
    IUUQBOJNFKTDPN
    *MMVTUSBUPSͰ47(Ξχϝʔγϣϯ༻ͷ47(ϑΝΠϧΛ࡞ͬͯΈͨ
    IUUQTMJHJODDPKQ
    TWHཁૉͷجຊతͳ࢖͍ํ·ͱΊ
    IUUQEFGHIJIUNMYEPNBJOKQUFDITWH.FNPTWH.FNPIUN