SVG is on your side @ MTDDC 2018

Transcript

1. is on your side SVGɺͦΕ͸͋ͳͨͷຯํ 匟歊湫埠 SVG
2. Prologue ·ͣ͸ͪ͜Β
4. দా௚थ CCO, Designer
5. SVG in various places. ͍ΖΜͳͱ͜ΖʹSVG
7. http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
8. https://www.fontself.com/
9. https://auwaa.ch/
10. Features SVGͷಛ௃Λ͓͞Β͍
11. XMLจॻͰ͋Δ จࣈ৘ใΛ಺แ ը૾ͷத਎ΛΞΫηγϒϧʹͰ͖Δ <circle cx="20" …> <title> Duck’s eye </title> </circle> ͢΂͕ͯཁૉʢDOMʣ CSS΍Web Fonts΋ద༻Ͱ͖Δ <circle> <path> <path> ࠶ར༻ੑ SVG Sprites΋͜ͷํ๏
12. Standalone SVG HTML CSS SVG ֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ HTML <svg> </svg> inline SVG HTMLͷதʹɺSVGίʔυΛ௚઀ॻ͘ HTML಺ʹ௚઀ؚΊΔ͜ͱ͕Ͱ͖Δ
13. viewBoxʢ࠲ඪܥʣͷ֓೦ width / height ࣮ੇͷαΠζࢦఆ preserveAspectRatio ΞεϖΫτൺอ࣋ํ๏ͷࢦఆ viewBox ඳըྖҬͷ࠲ඪܥΛఆٛ
14. filter, mask, pattern…ɹඇഁյͳޮՌ
15. Ξχϝʔγϣϯ࣮૷ํ๏͕๛෋ JavaScript ͳΜͰ΋Ͱ͖Δ var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2') SMIL ཁૉ͚ͩͰΞχϝʔγϣϯ <circle cx="20" …> <animate attributeName="cx" from="100" to="100" dur="5s" … /> </circle> CSS Animations CSSͷΞχϝʔγϣϯ΋࢖͑Δ @keyframes stroke-anime { 0% { stroke-dashoffset: 800; fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgba(#fff, .7); } }
16. ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ Custom Fields 3 6 3 4 σʔλͱ૬ੑྑ͠ ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ ਓؾ ࡏݿ
17. CMSʢMovable Typeʣʹ዁౓ͨ͠ͱ͜ΖͰ
18. ࠓճ͸
 σβΠφʔ޲͚ʹSVGΞχϝʔγϣϯΛ͝঺հ
19. Animation with JavaScript JSʹΑΔSVGΞχϝʔγϣϯ
20. SMIL CSS Animations JavaScript ཁૉ͚ͩͰΞχϝʔγϣϯ CSSͷΞχϝʔγϣϯ΋࢖͑Δ ͳΜͰ΋Ͱ͖Δ ͳͥɺJSͰΞχϝʔγϣϯʁ <circle cx="20" …> <animate attributeName="cx" from="100" to="100" dur="5s" … /> </circle> @keyframes stroke-anime { 0% { stroke-dashoffset: 800; fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgba(#fff, .7); } } var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2')
21. SMIL CSS Animations JavaScript ཁૉ͚ͩͰΞχϝʔγϣϯ SVGʹ࢖͑Δ
 CSSͷϓϩύςΟ͸ݶΒΕ͍ͯΔ ͳΜͰ΋Ͱ͖Δ ͳͥɺJSͰΞχϝʔγϣϯʁ IEͰ transform ͕ޮ͔ͳ͍ CSSͷΞχϝʔγϣϯ΋࢖͑Δ var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2')
22. TweenMax SVG.js Snap.svg Two.js D3.js ͲͷϥΠϒϥϦΛ࢖͏ʁ
23. TweenMax SVG.js Snap.svg Two.js D3.js ͱʹ͔͘ಈ͔͍ͨ͠ͳΒ
24. Ͳ͏͍ͬͨͱ͖ʹɹɹɹTweenMaxʁ DOMΞχϝʔγϣϯઐ༻ϥΠϒϥϦ λΠϜϥΠϯػೳ͕ڧྗ requestAnimationFrame Ͱಈ࡞͕ͳΊΒ͔ ඇΤϯδχΞͰ΋ͦΕͬΆ͘ಈ͔ͤΔ
25. λΠϜϥΠϯͰಈ͔ͯ͠Έ·͠ΐ͏
29. طଘͷSVGฤूʹ͸ɹɹɹBOXY SVG https://boxy-svg.com/
30. New Tab ੩ࢭըͷSVGϑΝΠϧΛอଘ
31. λΠϜϥΠϯͷΠϯελϯεΛ༻ҙ var tl = new TimelineMax();
32. ࢁΛϙϤϯͱಈ͔͢ tl .fromTo('#mountain', 1, {scaleY: '0', transformOrigin: '50% 100%'}, {scaleY: '1', ease: Bounce.easeOut}, '-=0')
33. ͍ͭͮͯɺଠཅͱؾٿΛಈ͔͢ tl .fromTo('#mountain', 1, {…}, '-=0') .fromTo('#sun', 1, {scale: '0'}, {scale: '1'}, '-=0.5') .fromTo('#ballon', 2, {y: '-300'}, {y: '0'}, '-=0.5')
34. .fromTo('#sun', 1, {x: 10, scale: 0}, {x: 60, scale: 1}, '-=0.5') ಈ͔͢ཁૉ duration ಈ͖࢝Ίͷঢ়ଶ ಈ͖ऴΘΓͷঢ়ଶ λΠϜϥΠϯʹ͓͚Δ։࢝λΠϛϯάʢલͷཁૉ͕ಈ͖ऴΘΔ0.5ඵલʣ
35. ಈ͔͍ͨ͠ॱʹੵΜͰ͍͚ͩ͘ var tl = new TimelineMax(); .fromTo() .fromTo() .staggerFromTo() .staggerFromTo() .staggerFromTo()
36. ෳ਺ͷཁૉΛ·ͱΊͯಈ͔͢ .staggerFromTo('[id^="build"]', 1, {scale: 0, transformOrigin: '50% 100%'}, {cycle: {scale: [1, .9, 1.1]}, ease: Bounce.easeOut}, '0.2', '-=0.2') 0.2ඵ͓͖ʹ
37. ͞Βʹෳ਺ͷཁૉΛ·ͱΊͯಈ͔͢ .staggerFromTo('[id^="tree"]', 1, {y: '-400', scaleY: 0.5, transformOrigin: '50% 0%'}, {y: '0', scaleY: 1, ease: Bounce.easeOut}, '0.2', '-=0.2') 0.2ඵ͓͖ʹ
38. .from() .to() .fromTo() .set() .staggerFrom() .staggerTo() .staggerFromTo() ͜Ε͚֮ͩ͑ͱ͚͹ಈ͔ͤΔ
39. ͱʹ͔͘
 λΠϜϥΠϯػೳ͕ࡉ͔͍ௐ੔ʹޮ͘
40. λΠϜϥΠϯΛؔ਺Խͯ͠ɺΠϕϯτϦεφΛόΠϯυ function timeline() { var tl = new TimelineMax(); tl.fromTo('#obj1', 3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } $('#obj1').on('click', function(){ timeline.play(); })
41. ෳ਺ͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ function timeline1() { var tl = new TimelineMax(); tl.fromTo('#obj1', 3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } var masterTl = new TimelineMax(); master .add(timeline1(), 'scene1') .add(timeline2(), 'scene2'); masterTl.play() function timeline2() { var tl = new TimelineMax(); tl.staggerFromTo('.class2', 3, ...) .fromTo('#obj2', 3, ... '+=0') return tl; }
42. εϐʔυ΋ޙ͔Βௐ੔Մೳ masterTl.timeScale(3).play(); ్த͔Βಈ͔ͨ͠Γ masterTl.seek("myLabel").play();
43. TweenMaxΛ࢖͓͚ͬͯ͹ ޙ͔ΒͰ΋ඍௐ੔͕༰қ
44. https://spiritapp.io/
45. Unique SVGͳΒͰ͸ͳ͜ͱ
46. SVG͸
 Ұຕֆ ͷʮத਎ʯΛಈ͔ͤΔ
47. New Tab
48. SVG͸
 ň ଐੑ ʯň CSS ʯͰਤܗ͕࡞ΒΕ͍ͯΔ
49. <svg viewBox="0 0 1024 768"> <filter id="blur" … > <feGaussianBlur stdDeviation="5" /> </filter> <rect x="10" y="10" width="40" height="20" fill="#f00" stroke="#c00" stroke-width="10"/>
50. ଐੑͷ஋͸ಈ͔ͤΔʢviewBoxʣ
51. ଐੑͷ஋͸ಈ͔ͤΔʢfilterʣ
52. ࠷৽ͷCSS΋࢖͑ΔʢCSS Variables ͳͲʣ <symbol id="duck"> <path d="…" style="fill: var(--primaryColor, #FC6)" /> </symbol> <use … id="duck-1" /> #duck-1 { --primaryColor: #0099CC; } <use … id="duck-2" /> #duck-1 { --primaryColor: #E52A39; }
53. Conclusion ·ͱΊ
54. SVGɺ͢͹Β͖͔͠ͳث༻ශ๡ େ͖͘࢖ͬͯ΋ খ͘͞࢖ͬͯ΋ ಈ͔ͯ͠΋ ੩ࢭըͰ΋
55. SVGɺ͢͹Β͖͔͠ͳث༻ශ๡ େ͖͘࢖ͬͯ΋ খ͘͞࢖ͬͯ΋ ಈ͔ͯ͠΋ ੩ࢭըͰ΋ Scalable
56. What is SVG ?
57. Super Very Good
58. is on your side SVGɺͦΕ͸͋ͳͨͷຯํ SVG Thank you