SVG アニメーションを実装するにあたり、辛いところ、気をつけたほうがいいところを紹介します。
ブログで紹介されました https://inside.dmm.com/entry/2017/11/28-fe-lt-vol1
47(Ξχϝʔγϣϯ%..DPNϥϘϑϩϯτΤϯυ։ൃ෦∁ాᠳଠΣσΟϯάύʔΫ✕%..DPNϥϘ߹ಉ-5ձ
View Slide
ࣗݾհ∁ాᠳଠϑϩϯτΤϯυ։ൃ෦ୈ(ಈը৴ࣄۀ෦͚ࣾձਓ
ࠓճ͢͜ͱ 47(ͷ͓͞Β͍ 47(Ξχϝʔγϣϯͷྫ 47(ΞχϝʔγϣϯͷͭΒΈ
47(ͷ͓͞Β͍
47(ͷ͓͞Β͍w 4DBMBCMF7FDUPS(SBQIJDTͷུw 9.-ܗࣜͰهड़͞ΕΔը૾ϑΥʔϚοτw ϕΫλʔΠϝʔδ༻ͷܗࣜͰදݱ͞ΕΔͨΊ֦େॖখʹڧ͍
ฐࣾͰͷ࣮ྫ
47(ͷͳ͔ΈQBUIE. D T QPMZHPOQPJOUT
47(Ξχϝʔγϣϯͷྫ
47(ΞχϝʔγϣϯͷྫετϩʔΫΞχϝʔγϣϯw IUUQTDPEFQFOJP4IUB@8XXQFOK(WF,/FEJUPSTw QBUIΛTUSPLFEBTIBSSBZϓϩύςΟͰഁઢͷࢦఆw TUSPLFEBTIP⒎TFUϓϩύςΟͷΛஞ࣍తʹมߋ
47(ΞχϝʔγϣϯͷྫϞʔϑΟϯάw IUUQTDPEFQFOJP4IUB@8XXQFO1+-;NHw QBUIͷEଐੑΛஞ࣍తʹมߋ
47(ΞχϝʔγϣϯͷྫΠʔδϯάw IUUQTDPEFQFOJP4IUB@8XXQFO3-&+2,FEJUPSTw ୯Ґ࣌ؒ͋ͨΓͷมԽͷׂ߹
47(ΞχϝʔγϣϯͷͭΒΈ
47(ΞχϝʔγϣϯͷͭΒΈw QBUIw QPMZHPOw TUSPLF⒎Gw HHw Ew WJFX#PYzw WJFX1PSUw ݪ࢝ϑΟϧλʔݟ׳Εͳ͍ཁૉଐੑ͕ଟ͍w EFGTw GF(BVTTJBO#MVSJOIPHFTUE%FWJBUJPOSFTVMUlGVHBw GF0⒎TFUJOGVHBEYEZQJZPzw GF.FSHFGF.BSHFw TZNCPMTZNCPMw VTFw UFYU1BUIUFYU1BUI
47(ΞχϝʔγϣϯͷͭΒΈϨΠϠʔ໊ຊޠ
47(ΞχϝʔγϣϯͷͭΒΈϨΠϠʔ໊ຊޠTWHYNMOTIUUQXXXXPSHTWHWJFX#PYǒUJUMFΞηοτ 5UJUMFHJEՔԌՌդ@EBUBOBNFՔԌՌդHJEՔԌՌդ@EBUBOBNFՔԌՌդQBUIDMBTTDMTE. )HHTWH
47(ΞχϝʔγϣϯͷͭΒΈ47(ʹํ͕͋Δ
47(ΞχϝʔγϣϯͷͭΒΈQBUIDMBTTDMTE. )
47(ΞχϝʔγϣϯͷͭΒΈQBUIDMBTTDMTE. )QBUIDMBTTDMTE. )
ͭΒ͘ͳΒͳ͍ͨΊʹ
ͭΒ͘ͳΒͳ͍ͨΊʹσβΠφʔw ύεͷํΛἧ͑Δw ϨΠϠʔͷཧΛ͢Δw Πϥετ͕ͲͷΑ͏ͳ47(ʢίʔυʣʹͳΔͷ͔Λ͓ͬͯ͘ΤϯδχΞw ΦʔαϦϯάπʔϧͷཧղw ΞχϝʔγϣϯܥͷϥΠϒϥϦͷࣝw ༻ޠͷཧղ
ຯํʹ͚ͭΕҹతͳΞχϝʔγϣϯ͕࡞ΕΔ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
(4"1IUUQTHSFFOTPDLDPNHTBQBOJNFKTIUUQBOJNFKTDPN*MMVTUSBUPSͰ47(Ξχϝʔγϣϯ༻ͷ47(ϑΝΠϧΛ࡞ͬͯΈͨIUUQTMJHJODDPKQTWHཁૉͷجຊతͳ͍ํ·ͱΊIUUQEFGHIJIUNMYEPNBJOKQUFDITWH.FNPTWH.FNPIUN