SVGアニメーションをやってみたら結構いい感じにできた話

Transcript

1. SVGΞχϝʔγϣϯΛ΍ͬͯΈͨΒ ݁ߏ͍͍ײ͡ʹͰ͖ͨ࿩ גࣜձࣾnanapi ख௩ ྄ @inureo
2. ࣗݾ঺հ ख௩ ྄ @inureo גࣜձࣾnanapi ΤϯδχΞ - άϥϑΟοΫσβΠϯͷઐ໳ֶߍΛଔۀ - Web੍࡞ձࣾ 5೥ - 2013೥10݄ nanapiʹΤϯδχΞͱͯ͠ೖࣾ དྷྺ ※ ݩʑσβΠφʔͳͷͰϑϩϯτपΓ͕ಘҙ ϝΠϯͷۀ຿Ͱ͸RailsʴTypeScript+Markup ɹCapybara+PoltergeistͰE2Eςετ͕޷͖ʹͳΔ
3. ࠓ೔఻͍͑ͨ͜ͱ 47(Ξχϝʔγϣϯ
   ݁ߏΑ͘ͳ͍ʁ
4. ࠓ೔఻͍͑ͨ͜ͱ ࠓճ͸47(Λಈతʹ
   ಈ͔ͯ͠Έ͓ͨ࿩Λ͠·͢ʂ
5. 1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺ΂ͯΈΔ 4. ·ͱΊ ࠓ೔ͷΞδΣϯμ
6. 1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺ΂ͯΈΔ 4. ·ͱΊ ࠓ೔ͷΞδΣϯμ
7. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ ԿΛ࡞ͬͯΔͷ͔
8. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ InTHEnetͷΦʔϓχϯάΞχϝʔγϣϯ InTHEnetͱ͸ ౦ژϝτϩΦʔϓϯσʔλίϯςετʹԠืͨ͠ʮϝτ Ϩϙʯ΍ɺYahoo!ϓϩτλΠϓίϯςετ’14 Ͱ४άϥ ϯϓϦɾUI৆Λ֫ಘͨ͠ʮϋϛΨίʯΛ࡞ͬͨνʔϜ
9. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ InTHEnetͷΦʔϓχϯάΞχϝʔγϣϯ InTHEnetͱ͸ ౦ژϝτϩΦʔϓϯσʔλίϯςετʹԠืͨ͠ʮϝτ Ϩϙʯ΍ɺYahoo!ϓϩτλΠϓίϯςετ’14 Ͱ४άϥ ϯϓϦɾUI৆Λ֫ಘͨ͠ʮϋϛΨίʯΛ࡞ͬͨνʔϜ σϞ
10. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ *MMVTUSBUPSͷϊϦ͕௨͡Δ
    ɹɹɹɹɹ⾪
    ɹɹTWHKTͱ͍͏ศརͳϥΠϒϥϦ
    ɹɹɹɹɹ⾫
    ࠲ඪυϦϒϯΘ͔Γ΍͍͢
    ɹɹɹ⾪
    ɹɹԿΑΓ͍ܰ
    ɹɹɹ⾫
    ʊਓਓਓਓਓਓʊ
    ʼɹఱ࠽͔Αɹʻ
    ʉ?:?:?:?:?ʉ
11. 1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺ΂ͯΈΔ 4. ·ͱΊ ࠓ೔ͷΞδΣϯμ
12. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ྑ͍ͱݴͬͯ΋
    Կ͕͍͍ͷ͔ʁ ͭ͋ΔΑʂ
13. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 47(+4͕௒ศར
    ʂ 47(+4ͱ͍͏ϥΠϒϥϦ͕͋ͬͯɺͦΕΛ࢖͏ͱ
    DBOWBTฒʹ؆୯ʹ47(Λѻ͏͜ͱ͕Ͱ͖Δʂ
14. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
     
15. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ
16. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    
17. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    ࡾ֯Ͱ͖ͪΌ͏ʜ
18. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU 
     
    
19. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU 
     
    ࢛֯Ͱ͖ͪΌ͏ʜQY
    QYͷʜ
20. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU 
     
    ࢛֯Ͱ͖ͪΌ͏ʜQY
    QYͷʜ TWHSFDU 
     Y  Z 
    pMM b⒎⒎⒎` TUZMF bPQBDJUZ` 
21. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH
    
    47( TFMFDUPS TJ[F 
    b 
    ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO  
     
      
    ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU 
     
    ࢛֯Ͱ͖ͪΌ͏ʜQY
    QYͷʜ TWHSFDU 
     Y  Z 
    pMM b⒎⒎⒎` TUZMF bPQBDJUZ` 
    QYਖ਼ํܗ͔ͭ࠲ඪ͕ 
     Ͱಁ໌ͳ࢛͕֯Ͱ͖Δ
22. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ΋ͪΖΜఆٛϑΝΠϧ΋͋ΔͷͰ
    5ZQFTDSJQU΋͔͚ΔΑ
23. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ
24. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ΠϥϨͷਤܗΛͦͷ··࢖͑Δʂ *MMVTUSBUPSͰਤܗΛ࡞ͬͯ47(Ͱอଘ͢Ε͹ɺ
    ෳࡶͳਤܗ΋1PMZHPOܗࣜʹͳΔͷͰ࢖͍΍͍͢ʂ
25. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ΠϥϨͷਤܗΛͦͷ··࢖͑Δʂ *MMVTUSBUPSͰਤܗΛ࡞ͬͯ47(Ͱอଘ͢Ε͹ɺ
    ෳࡶͳਤܗ΋1PMZHPOܗࣜʹͳΔͷͰ࢖͍΍͍͢ʂ ͨͩ͠ɺɺ
26. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ಈతʹ࡞Δ৔߹
    ࠲ඪΛ഑ྻͰ࣋ͭͷͰਏ͍
27. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ॻ͖ग़࣌͠΋஫ҙ 47(ॻ͖ग़࣌͠ʹ࠲ඪͷ
    খ਺఺ͷܻ਺Λ૿΍ͯ͠
    ͓͔ͳ͍ͱ൵͘͠ͳΔ
28. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ খ਺఺Λ૿΍͞ͳ͍ͱ͜͏ͳΔΑ σϞ
29. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ খ਺఺Λ૿΍͢ͱ͜͏ͳΔΑ σϞ
30. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ૿΍ͯ͠΋ղܾ͠ͳ͍͜ͱ΋͋Δ
31. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ͦ͏͍͏࣌͸*MMVTUSBUPSΈ͍ͨʹ
    ઢΛ͚ͭͯղܾ͢Δͱૣ͍ʜ TUZMF TUSPLF
    ⒎⒎⒎ 
 TUZMF TUSPLFXJEUI
     
32. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ Ξχϝʔγϣϯ΋؆୯ʂ TWH@FMFNFOU
    BOJNBUF EVSBUJPO
    FBTJOH
    EFMBZ
    NPWF Y Z  ͜Ε͚ͩͰ͵Δ͵Δͬͱಈ͍ͪΌ͏ʜ
33. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ Ξχϝʔγϣϯ΋؆୯ʂ TWH@FMFNFOU
    BOJNBUF EVSBUJPO
    FBTJOH
    EFMBZ
    NPWF Y Z  ͜Ε͚ͩͰ͵Δ͵Δͬͱಈ͍ͪΌ͏ʜ ͔͠΋ɺɺ
34. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ Ϩεϙϯγϒʹ΋Ͱ͖ͪΌ͏ʂ *MMVTUSBUPSͷάϧʔϓԽͷΑ͏ʹɺ
    ΞχϝʔγϣϯΛH
    ͰғͬͯάϧʔϓԽ͢Ε͹ɺ
    άϧʔϓશମΛTDBMFϝιουͰ֦େͰ͖ΔͷͰɺ
    DBOWBTͱҧͬͯɺࡉ͔͍ௐ੔Λ͠ͳͯ͘΋͍͍ʂ
35. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ
36. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 1. SVG.JS͕௒ศརʂ 2. ΠϥϨͷਤܗ΋ͦͷ··࢖͑Δʂ 3. Ξχϝʔγϣϯ͕؆୯ʂ ·ͱΊ
37. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 1. SVG.JS͕௒ศརʂ 2. ΠϥϨͷਤܗ΋ͦͷ··࢖͑Δʂ 3. Ξχϝʔγϣϯ͕؆୯ʂ ·ͱΊ ͱ͸͍͑ࠓճ͸*O5)&OFUͷϩΰͱ
    47(Ξχϝʔγϣϯͷ૬ੑ͕
    Α͔ͬͨײ͕ڧ͍ͷͰࢀߟ·Ͱʹʂ
38. 1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺ΂ͯΈΔ 4. ·ͱΊ ࠓ೔ͷΞδΣϯμ
39. canvasͱൺ΂ͯΈΔ
40. canvasͱൺ΂ͯΈΔ DBOWBTॻ͍ͨ͜ͱ
    ͳ͔ͬͨʜ
41. canvasͱൺ΂ͯΈΔ Ͱ΋ൺ΂ͯΈΔ w ϙΠϯτΛࢦఆͯ͠ΦϒδΣΫτ͕ඳըͰ͖Δ
    w $44Ͱ΋มߋ͕Մೳ
    w ͭͷ1PMZHPOɺ3FDUɺ1BUI͕%0.ཁૉ
    w ֦େ͕؆୯ʢ഑ஔҐஔ͸ཁ੍ޚʣ ϝϦοτ w ΦϒδΣΫτ͕ͭͣͭ%0.ʹͳΔͷͰɺΦϒ δΣΫτ͕૿͑Δͱॏͦ͏ σϝϦοτ
42. 1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺ΂ͯΈΔ 4. ·ͱΊ ࠓ೔ͷΞδΣϯμ
43. ·ͱΊ IllustratorϊϦͰͰ͖ΔͷͰ ෑډ͕௿ָ͍͍͠͠Αʙʂ օͰSVGΞχϝʔγϣϯ͠Α͏ʂ Sin! Cos! Tan!
44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠