Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイナーのためのSVG基礎 + アニメーション

デザイナーのためのSVG基礎 + アニメーション

クリエイティブハント2019
松田 直樹さんのセッション

More Decks by クリエイティブハント山口

Other Decks in Technology

Transcript

  1. XMLจॻͰ͋Δ จࣈ৘ใΛ಺แ ը૾ͷத਎ΛΞΫηγϒϧʹͰ͖Δ <circle cx="20" …> <title> Duck’s eye </title>

    </circle> ͢΂͕ͯཁૉʢDOMʣ CSS΍Web Fonts΋ద༻Ͱ͖Δ <circle> <path> <path> ࠶ར༻ੑ SVG Sprites΋͜ͷํ๏
  2. Standalone SVG HTML CSS SVG ֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ HTML <svg> </svg> inline

    SVG HTMLͷதʹɺSVGίʔυΛ௚઀ॻ͘ HTML಺ʹ௚઀ؚΊΔ͜ͱ͕Ͱ͖Δ
  3. Ξχϝʔγϣϯ࣮૷ํ๏͕๛෋ 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); } }
  4. ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ Custom Fields 3 6 3 4

    σʔλͱ૬ੑྑ͠ ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ ਓؾ ࡏݿ
  5. SVGͰ͸ཁૉ͝ͱʹ title, desc Λஔ͚Δ <g> <title>͍͘Β</title> <desc>…</desc> </g> <g> <title>ւଽͱγϟϦ</title>

    <desc>…</desc> </g> <g> <title>͓ࡼ</title> <desc>…</desc> </g> <title>͍͘Βͷ܉؋</title>
  6. role ͱ aria-labelledby Λ௥ه͢Ε͹ εΫϦʔϯϦʔμʔରԠ΋Ͱ͖Δ <svg viewBox="0 0 100 100"

    role="img" aria-labelledby="title desc"> <title id="title">ϋϯόʔΨʔ</title> <desc id="desc">ϋϯόʔΨʔͷϑϥοτͳΠϥετΞΠ ίϯ</desc> … </svg>
  7. ͜Μͳάϥϑ΋ݸʑͷάϧʔϓ͝ͱʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ౉ล ాத

    ߴڮ ླ໦ ࠤ౻ 佐藤 80点 鈴⽊ 125点 ⾼橋 100点 ⽥中 140点 渡辺 90点
  8. 要素の再利⽤ <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10"

    fill="#fc0"/> symbol ͷ৔߹ɺ਌SVG ཁૉͱ͸ผͷಠཱͨ͠ viewBoxΛ࣋ͯΔͷͰɺ ࠶ར༻ͨ͠ࡍͷαΠζมߋ΋Մೳ Point symbol ཁૉ͸࣮ମͷͳ͍ਤܗΛఆٛ͢Δ use ཁૉͰ࠶ར༻ͯ͠ॳΊͯදࣔͰ͖Δ
  9. CSS ͷ animation, transition Ͱͷ Ξχϝʔγϣϯ͕Մೳɻ͕ͩ… ͨͩ͠ɺಈ͔ͤΔͷ͸ SVG 1.1 Ͱ࢖͑Δ

    CSS ϓϩύςΟʹݶΒΕΔ IE Ͱ͸ɺSVG ͷཁૉʹ transform ͕·ͬͨ͘ޮ͔ͳ͍ͷͰ
 CSS Ͱ͸ਤܗΛҠಈɾมܗͤ͞Δ͜ͱ͕Ͱ͖ͳ͍ Point Point CSS Ξχϝʔγϣϯ
  10. ͭ·ΓɺCSS ͰࢦఆͰ͖ͳ͍ଐੑ஋͸ΞχϝෆՄೳ <circle cx="120" cy="120" r="100" /> 100 , 120,

    120 ਤܗͷେ͖͞ɺҐஔɺύεܗঢ়ͳͲΛࢦఆ͢Δଐ ੑ͸ɺCSS Ͱ͸ࢦఆͰ͖ͳ͍ CSS Ξχϝʔγϣϯ
  11. JavaScript Ͱ SVG DOM Λૢ࡞ͯ͠ Ξχϝʔγϣϯͤ͞Δ SVGཁૉͷଐੑ஋Λॻ͖׵͑Δɻ࣮࣭తʹͳΜͰ΋Ͱ͖Δ SVG DOMʢDOM Level

    2ʣ͸ HTML DOMʢDOM Level 1ʣͱ͸ ผ෺ͳͷͰɺjQueryͰ͸ཁૉੜ੒ͳͲͰ͖ͳ͍ ֎෦ͷ SVG ϑΝΠϧΛɺimg ཁૉ΍ CSS background Ͱࢀর දࣔͤͨ͞৔߹ɺ࢓্༷·ͬͨ͘ಈ͔ͳ͍ Point Point Point DOM Ξχϝʔγϣϯ
  12. SVG DOM Ξχϝʔγϣϯ var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "50");

    rect.setAttribute("width", "100"); rect.setAttribute("height", "100"); rect.setAttribute("fill", "red"); var rot = 0; setInterval(function(){ rect.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10); document.querySelector("svg").appendChild(rect);
  13. SVG ⽤のアニメーションライブラリを使おう https://greensock.com/ http://julian.com/research/velocity/ http://snapsvg.io/ ߴػೳͳ౷߹Ξχϝʔγϣϯϥ ΠϒϥϦɻ
 λΠϜϥΠϯػೳ͕ڧྗ͗͢ Δɻ·ͨɺSVGͷΞχϝʔγϣ ϯ༻్͝ͱʹϓϥάΠϯΛಋೖ

    ͯ͠࢖༻͢Δɻ jQueryͷanimateޓ׵ͱͳͬͯ ͍ΔΞχϝʔγϣϯϥΠϒϥ ϦɻՄೳͳݶΓCSSΛ࢖ͬͯ͘ ΕΔͷͰΞχϝʔγϣϯͷߴ଎ Խ͕ਤΕΔɻ ׬શʹSVGઐ༻ͷϥΠϒϥϦɻ
 SVGͷੜ੒΍ɺ֎෦ͷSVGϑΝ ΠϧΛऔΓࠐΜͰ಺෦Λૢ࡞͢ Δ͜ͱ΋Մೳɻ
 jQueryϥΠΫʹॻ͚Δɻ https://svgjs.com/ ׬શʹSVGઐ༻ͷϥΠϒϥϦɻ
 ଞϥΠϒϥϦΑΓ΋ൺֱతܰྔ Ͱߴ଎ɻ
 Ξοϓσʔτ͕සൟͰ҆৺Ͱ͖ Δɻ DOM Ξχϝʔγϣϯ
  14. width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/>

    100px 100px 円の半径は 100座標 SVG ͷ 1࠲ඪ ϒϥ΢βͷ 0.5px = 100px / ௚ܘ200 = 0,0 200,200 viewBox ͷ஋ͱ width, height ͷ஋͸ผ෺Ͱ͋Δ
  15. 100px 100px ԁͷ൒ܘ͸ 100࠲ඪ ? ? ॳظ࠲ඪܥ (1px) = =

    SVG ͷ 1࠲ඪ ʢviewBoxͳ͠ʣ width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> viewBox ͷࢦఆ͕ͳ͍৔߹
  16. SVG ͷ 1࠲ඪ Fluid = = ਌ཁૉͷαΠζ / 200 width="100px"

    height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> 100px px 0,0 200,200 0,0 200px 200,200 px width, height ͷࢦఆ͕ͳ͍৔߹
  17. width="200px" height="200px" viewBox="-100 -100 200 200" <circle cx="100" cy="100" r="100"/>

    200px 200px ࠨ্࠲ඪΛϚΠφεࢦఆ͢Δͱ ج४఺ʢ0, 0ʣͷҐஔΛ ΞʔτϘʔυதԝʹ͢Δ͜ͱ΋
 Ͱ͖Δ -100, -100 100, 100 0, 0 viewBox ͸ʮج४఺ͷҐஔʯͱʮ࠲ඪܥʯΛఆٛ͢Δ
  18. SVG-UA ͸ɺ ࠷΋֎ଆͷ svg ཁૉʹର͠ɺॳظͷϏϡʔϙʔτ࠲ඪܥͱॳظͷར༻࠲ඪܥ Λೋͭͷ࠲ඪܥ͕ಉ஋ʹͳΔΑ͏ʹఆΊΔɻ૒ํͷ࠲ඪܥͷݪ఺͸Ϗϡʔϙʔτͷݪ఺ʹ ߹ΘͤΒΕɺॳظ࠲ඪܥͷ1୯Ґ͸Ϗϡʔϙʔτʹ͓͚Δ1ʮըૉʯʢ͢ͳΘͪ CSS2 Ͱఆ ٛ͞ΕΔ୯Ґ

    px ([CSS2]ɺ4.3.2 અ) Ͱදͨ͠1px ʣʹ౳͘͠͞ΕΔɻ ΄ͱΜͲͷ৔߹ʢಠཱͨ͠ SVG จॻͰ͋Δ͔ɺ਌ͱͳΔ XML จॻʹࢀর·ͨ͸ΠϯϥΠ ϯʹΑΓ SVG จॻย͕ຒΊ͜·Ε͍ͯͯɺ਌ͷϨΠΞ΢τ͕ CSS ·ͨ͸ XSL Ͱܾఆ͞Ε ͍ͯΔΑ͏ͳ৔߹ʣɺॳظϏϡʔϙʔτ࠲ඪܥ͸ʢ͕ͨͬͯ͠ॳظར༻࠲ඪܥ΋ʣɺͦͷ ݪ఺ΛϏϡʔϙʔτͷࠨ্۱ʹɺX ࣠ਖ਼ํ޲Λӈ޲͖ʹɺY ࣠ਖ਼ํ޲ΛԼ޲͖ʹɺςΩε τͷඳը͸ʮਖ਼ཱʯͨ͠ঢ়ଶʹͳΔΑ͏ʹ͞ΕΔʢʮਖ਼ཱʯͱ͸ɺϩʔϚࣈ΍ΞδΞ஍Ҭ ͷ༻ࣈܥͷશ֯දҙจࣈ͸ɺରԠ͢ΔάϦϑͷ্୺Λ্ଆʹɺӈ୺ΛӈଆʹҐஔͤ͞Δ͜ ͱΛҙຯ͢Δʣɻ
  19. 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')
  20. 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')
  21. .fromTo('#mountain', 1, {x: 10, scale: 0}, {x: 60, scale: 1},

    '-=0.5') ಈ͔͢ཁૉ duration ಈ͖࢝Ίͷঢ়ଶ ಈ͖ऴΘΓͷঢ়ଶ λΠϜϥΠϯʹ͓͚Δ։࢝λΠϛϯάʢલͷཁૉ͕ಈ͖ऴΘΔ0.5ඵલʣ
  22. ͍ͭͮͯɺଠཅͱؾٿΛಈ͔͢ tl .fromTo('#mountain', 1, {…}, '-=0') .fromTo('#sun', 1, {scale: '0'},

    {scale: '1'}, '-=0.5') .fromTo('#ballon', 2, {y: '-300'}, {y: '0'}, '-=0.5')
  23. λΠϜϥΠϯΛؔ਺Խͯ͠ɺΠϕϯτϦεφΛόΠϯυ function timeline() { var tl = new TimelineMax(); tl.fromTo('#obj1',

    3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } $('#obj1').on('click', function(){ timeline.play(); })
  24. ෳ਺ͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ 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; }
  25. <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"/>
  26. ࠷৽ͷ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; }