Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーのためのSVG基礎 + アニメーション
Search
クリエイティブハント山口
October 19, 2019
Technology
1
2.1k
デザイナーのためのSVG基礎 + アニメーション
クリエイティブハント2019
松田 直樹さんのセッション
クリエイティブハント山口
October 19, 2019
Tweet
Share
More Decks by クリエイティブハント山口
See All by クリエイティブハント山口
山口県を元気にするクリエイティブビジネスの役割
chy
0
810
働くこと、作ること、生きること
chy
0
1.1k
クリエイティブとシステマティック
chy
0
1.1k
Other Decks in Technology
See All in Technology
アジャイル開発とスクラム
araihara
0
160
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
2.5Dモデルのすべて
yu4u
2
610
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
SCSAから学ぶセキュリティ管理
masakamayama
0
140
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Designing for Performance
lara
604
68k
Site-Speed That Sticks
csswizardry
3
370
The World Runs on Bad Software
bkeepers
PRO
67
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Statistics for Hackers
jakevdp
797
220k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
GitHub's CSS Performance
jonrohan
1030
460k
Side Projects
sachag
452
42k
Music & Morning Musume
bryan
46
6.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
σβΠφʔͷͨΊͷSVGجૅ+Ξχϝʔγϣϯ 松⽥直樹 Basics & Animations
Prologue ·ͣͪ͜Β
None
લ
ࠓ 18લͷ͜ͱΛ͓͠·͢
দ ా थ CCO, Designer
None
None
SVG in various places ͜Μͳͱ͜ΖʹSVG
None
None
https://lottiefiles.com/featured
http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
https://auwaa.ch/
SVGͬͯ·͔͢ʁ SVG
Features SVGͷಛΛ͓͞Β͍
XMLจॻͰ͋Δ จࣈใΛแ ը૾ͷதΛΞΫηγϒϧʹͰ͖Δ <circle cx="20" …> <title> Duck’s eye </title>
</circle> ͕ͯ͢ཁૉʢDOMʣ CSSWeb Fontsద༻Ͱ͖Δ <circle> <path> <path> ࠶ར༻ੑ SVG Sprites͜ͷํ๏
Standalone SVG HTML CSS SVG ֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ HTML <svg> </svg> inline
SVG HTMLͷதʹɺSVGίʔυΛॻ͘ HTMLʹؚΊΔ͜ͱ͕Ͱ͖Δ
viewBoxʢ࠲ඪܥʣͷ֓೦ width / height ࣮ੇͷαΠζࢦఆ preserveAspectRatio ΞεϖΫτൺอ࣋ํ๏ͷࢦఆ viewBox ඳըྖҬͷ࠲ඪܥΛఆٛ
filter, mask, pattern…ɹඇഁյͳޮՌ
Ξχϝʔγϣϯ࣮ํ๏͕๛ 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); } }
ίετύϑΥʔϚϯε ٱੑ σβΠϯ ಠࣗੑ Custom Fields 3 6 3 4
σʔλͱ૬ੑྑ͠ ίετύϑΥʔϚϯε ٱੑ σβΠϯ ಠࣗੑ ਓؾ ࡏݿ
Merits Ͳ͏ศརͳͷ͔
1 ͕ͯ͢ΦϒδΣΫτͰ͋Δ
画像 であり、 ⽂書 である SVG
XMLจॻ͔ͩΒɺͯ͢ͷਤܗɹཁૉɹ จࣈσʔλɹʢςΩετϊʔυʣΛؚΊΒΕΔ ը૾ͷதʹɹΞΫηγϏϦςΟɹΛ֬อͰ͖Δ
JPEG PNG ͷସςΩετ alt="·͙Ζͷण࢘" longdesc="http://example.com/ desc1"
SVGͰཁૉ͝ͱʹ title, desc Λஔ͚Δ <g> <title>͍͘Β</title> <desc>…</desc> </g> <g> <title>ւଽͱγϟϦ</title>
<desc>…</desc> </g> <g> <title>͓ࡼ</title> <desc>…</desc> </g> <title>͍͘Βͷ܉؋</title>
role ͱ aria-labelledby Λه͢Ε εΫϦʔϯϦʔμʔରԠͰ͖Δ <svg viewBox="0 0 100 100"
role="img" aria-labelledby="title desc"> <title id="title">ϋϯόʔΨʔ</title> <desc id="desc">ϋϯόʔΨʔͷϑϥοτͳΠϥετΞΠ ίϯ</desc> … </svg>
͜Μͳάϥϑݸʑͷάϧʔϓ͝ͱʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ล ాத
ߴڮ ླ ࠤ౻ 佐藤 80点 鈴⽊ 125点 ⾼橋 100点 ⽥中 140点 渡辺 90点
2 ϞδϡʔϧΛఆٛͰ͖Δ ʢ࠶ར༻ੑʣ
ಉ͡ SVG จॻɺ͘͠֎෦ͷ SVG จॻͷ ݸʑͷਤܗʢΦϒδΣΫτʣΛͲ͜ͰͰ࠶ར༻Ͱ͖Δ Web ComponentsʢShadow DOMʣ Λઌߦ࣮͍ͯ͠ΔΑ͏ͳͷ
SVG ͷ͍͢͝ͱ͜Ζ
要素の再利⽤ <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10"
fill="#fc0"/> symbol ͷ߹ɺSVG ཁૉͱผͷಠཱͨ͠ viewBoxΛ࣋ͯΔͷͰɺ ࠶ར༻ͨ͠ࡍͷαΠζมߋՄೳ Point symbol ཁૉ࣮ମͷͳ͍ਤܗΛఆٛ͢Δ use ཁૉͰ࠶ར༻ͯ͠ॳΊͯදࣔͰ͖Δ
<symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1,4.8-4.5,5.5-7.2c-1.9,1 .2-6.1,2.9-8.2,2.9v0C51.5,1.6,48.2,0,44.4,0 c-7.3,0-13.2,5.9-13.2,13.2c0,1,0.1,2,0.3,2.9h0c-9.9-0.3-20.7-5.2 -27.2-13.7c-4,6.9-0.5,14.6,4,17.4c-1.6,0.1-4.4-0.2-5.8-1.5 C2.5,23,4.7,29.1,12.7,31.3c-1.6,0.8-4.3,0.6-5.5,0.4c0.4,3.9,5.9, 9,11.8,9c-2.1,2.5-10.1,6.9-19,5.5C6.1,49.9,13.2,52,20.7,52 c21.3,0,37.8-17.3,37-38.6c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2c0-0.1,
0-0.1,0-0.2C59.5,11.7,62.1,9.3,64,6.2z"/> </symbol> <use xlink:href="#tw" x="20" y="0" fill="#319aec"/> <use xlink:href="#tw" x="40" y="0" fill="#319aec"/> <use xlink:href="#tw" x="60" y="0" fill="#319aec"/> <use xlink:href="#tw" x="80" y="0" fill="#319aec"/> ίʔυྔઅͰ͖Δ
index.html icons.svg 1ຕͷ SVG ͷதʹ͋ΔਤܗΛɺݸผʹͲ͜ʹͰදࣔͰ͖Δ Point <svg> <use xlink:href="icon.svg#train"/> </svg>
SVG Sprites (svgstore)
•viewBox ΛಠࣗʹఆٛͰ͖ΔͨΊɺ୯ಠͰͷ࠲ඪܥΛ࣋ͭ •use ཁૉͰ࠶ར༻͢ΔࡍʹαΠζΛมߋͰ͖Δʢ࠲ඪܥมʣ •ਤܗཁૉΛ୯ʹςϯϓϨʔτԽͨ͠ͷ •୯ಠͷ࠲ඪܥ࣋ͨͣɺ࠶ར༻࣌ʹαΠζมߋͰ͖ͳ͍ symbol ཁૉ defs ཁૉ
symbol ཁૉ ͱ defs ཁૉͷҧ͍
3 ଟ༷ͳΞχϝʔγϣϯํ๏
SMIL Ξχϝʔγϣϯ CSS Ξχϝʔγϣϯ DOM Ξχϝʔγϣϯ SVG ͷΞχϝʔγϣϯ େ͖͚ͯ͘3छྨ
animateཁૉʹΑΔΞχϝʔγϣϯ IE, Edge ඇରԠ SMIL Ξχϝʔγϣϯ
CSS ͷ animation, transition Ͱͷ Ξχϝʔγϣϯ͕Մೳɻ͕ͩ… ͨͩ͠ɺಈ͔ͤΔͷ SVG 1.1 Ͱ͑Δ
CSS ϓϩύςΟʹݶΒΕΔ IE ͰɺSVG ͷཁૉʹ transform ͕·ͬͨ͘ޮ͔ͳ͍ͷͰ CSS ͰਤܗΛҠಈɾมܗͤ͞Δ͜ͱ͕Ͱ͖ͳ͍ Point Point CSS Ξχϝʔγϣϯ
ͭ·ΓɺCSS ͰࢦఆͰ͖ͳ͍ଐੑΞχϝෆՄೳ <circle cx="120" cy="120" r="100" /> 100 , 120,
120 ਤܗͷେ͖͞ɺҐஔɺύεܗঢ়ͳͲΛࢦఆ͢Δଐ ੑɺCSS ͰࢦఆͰ͖ͳ͍ CSS Ξχϝʔγϣϯ
http://www.w .org/TR/SVG/propidx.html SVG Ͱ͑ΔCSSϓϩύςΟҰཡ
JavaScript Ͱ SVG DOM Λૢ࡞ͯ͠ Ξχϝʔγϣϯͤ͞Δ SVGཁૉͷଐੑΛॻ͖͑Δɻ࣮࣭తʹͳΜͰͰ͖Δ SVG DOMʢDOM Level
2ʣ HTML DOMʢDOM Level 1ʣͱ ผͳͷͰɺjQueryͰཁૉੜͳͲͰ͖ͳ͍ ֎෦ͷ SVG ϑΝΠϧΛɺimg ཁૉ CSS background Ͱࢀর දࣔͤͨ͞߹ɺ্༷·ͬͨ͘ಈ͔ͳ͍ Point Point Point DOM Ξχϝʔγϣϯ
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);
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 Ξχϝʔγϣϯ
4 filterޮՌ
filterݩͷΠϝʔδΛյ͞ͳ͍
DEMO
SVG Filter Builder ͕ศར https://svgfilters.com/
viewBox ͜Ε͚ͩཧղ͓͖͍ͯͨ͠
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" >
<circle cx="100" cy="100" r="100"/> </svg>
։࢝ ʢxy࠲ඪʣ viewBox ෯ viewBox ߴ͞ width="200px" height="200px" viewBox="0 0
200 200"
width="200px" height="200px" viewBox="0 0 200 200" viewBox の値 左上座標と座標系 表⽰サイズ
viewBox width, height ≠
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 ͷผͰ͋Δ
100px 100px ԁͷܘ 100࠲ඪ ? ? ॳظ࠲ඪܥ (1px) = =
SVG ͷ 1࠲ඪ ʢviewBoxͳ͠ʣ width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> viewBox ͷࢦఆ͕ͳ͍߹
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 ͷࢦఆ͕ͳ͍߹
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 ʮج४ͷҐஔʯͱʮ࠲ඪܥʯΛఆٛ͢Δ
1࠲ඪͷαΠζɺwidth, height ʹΑͬͯมΘΔ ɹviewBox ʹΑΔ ɹม͞Εͨ1࠲ඪ 1࠲ඪͷ୯Ґͷ͜ͱΛ ࠲ඪܥม ར༻୯Ґ
SVG-UA ɺ ࠷֎ଆͷ svg ཁૉʹର͠ɺॳظͷϏϡʔϙʔτ࠲ඪܥͱॳظͷར༻࠲ඪܥ Λೋͭͷ࠲ඪܥ͕ಉʹͳΔΑ͏ʹఆΊΔɻํͷ࠲ඪܥͷݪϏϡʔϙʔτͷݪʹ ߹ΘͤΒΕɺॳظ࠲ඪܥͷ1୯ҐϏϡʔϙʔτʹ͓͚Δ1ʮըૉʯʢ͢ͳΘͪ CSS2 Ͱఆ ٛ͞ΕΔ୯Ґ
px ([CSS2]ɺ4.3.2 અ) Ͱදͨ͠1px ʣʹ͘͠͞ΕΔɻ ΄ͱΜͲͷ߹ʢಠཱͨ͠ SVG จॻͰ͋Δ͔ɺͱͳΔ XML จॻʹࢀর·ͨΠϯϥΠ ϯʹΑΓ SVG จॻย͕ຒΊ͜·Ε͍ͯͯɺͷϨΠΞτ͕ CSS ·ͨ XSL Ͱܾఆ͞Ε ͍ͯΔΑ͏ͳ߹ʣɺॳظϏϡʔϙʔτ࠲ඪܥʢ͕ͨͬͯ͠ॳظར༻࠲ඪܥʣɺͦͷ ݪΛϏϡʔϙʔτͷࠨ্۱ʹɺX ࣠ਖ਼ํΛӈ͖ʹɺY ࣠ਖ਼ํΛԼ͖ʹɺςΩε τͷඳըʮਖ਼ཱʯͨ͠ঢ়ଶʹͳΔΑ͏ʹ͞ΕΔʢʮਖ਼ཱʯͱɺϩʔϚࣈΞδΞҬ ͷ༻ࣈܥͷશ֯දҙจࣈɺରԠ͢ΔάϦϑͷ্Λ্ଆʹɺӈΛӈଆʹҐஔͤ͞Δ͜ ͱΛҙຯ͢Δʣɻ
͜ΕΒΛཧղ͓ͯ͘͜͠ͱ͕ SVGͷදࣔͰϋϚΒͳ͍ίπ viewBox width, height preserveAspectRatio ͱɺͱ͖Ͳ͖
DEMO viewBoxΛཧղ͓͔ͯ͠ͳ͍ͱͲ͏ࠔΔ͔
viewBoxΛཧղ͍ͯ͠ͳ͍ͱࠔΔ͜ͱ transform ʹࢦఆ͢Δ୯Ґ࠲ඪม͞ΕΔ SVGͷཁૉ transform-origin ͷج४͕ҟͳΔ viewBox࠲ඪܥΛఆٛ͢Δ͕ɺ୯Ґఆٛ͠ͳ͍
https://speakerdeck.com/readymadegogo/hamarusvg-css-nite-lp47 ͦͷଞɺwebͰ͏্Ͱͷղܾࡦͪ͜Β
Animation JSʹΑΔSVGΞχϝʔγϣϯ
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')
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')
TweenMax SVG.js Snap.svg Two.js D3.js ͲͷϥΠϒϥϦΛ͏ʁ
TweenMax SVG.js Snap.svg Two.js D3.js ͱʹ͔͘ಈ͔͍ͨ͠ͳΒ
Ͳ͏͍ͬͨͱ͖ʹɹɹɹTweenMaxʁ DOMΞχϝʔγϣϯઐ༻ϥΠϒϥϦ λΠϜϥΠϯػೳ͕ڧྗ requestAnimationFrame Ͱಈ࡞͕ͳΊΒ͔ ඇΤϯδχΞͰͦΕͬΆ͘ಈ͔ͤΔ
λΠϜϥΠϯͰಈ͔ͯ͠Έ·͠ΐ͏
None
None
None
طଘͷSVGฤूʹɹɹɹBOXY SVG https://boxy-svg.com/
New Tab ੩ࢭըͷSVGϑΝΠϧͱͯ͠อଘ
λΠϜϥΠϯͷΠϯελϯεΛ༻ҙ var tl = new TimelineMax();
ࢁΛϙϤϯͱಈ͔͢ tl .fromTo('#mountain', 1, {scaleY: '0', transformOrigin: '50% 100%'}, {scaleY:
'1', ease: Bounce.easeOut}, '-=0')
.fromTo('#mountain', 1, {x: 10, scale: 0}, {x: 60, scale: 1},
'-=0.5') ಈ͔͢ཁૉ duration ಈ͖࢝Ίͷঢ়ଶ ಈ͖ऴΘΓͷঢ়ଶ λΠϜϥΠϯʹ͓͚Δ։࢝λΠϛϯάʢલͷཁૉ͕ಈ͖ऴΘΔ0.5ඵલʣ
͍ͭͮͯɺଠཅͱؾٿΛಈ͔͢ tl .fromTo('#mountain', 1, {…}, '-=0') .fromTo('#sun', 1, {scale: '0'},
{scale: '1'}, '-=0.5') .fromTo('#ballon', 2, {y: '-300'}, {y: '0'}, '-=0.5')
ಈ͔͍ͨ͠ॱʹੵΜͰ͍͚ͩ͘ var tl = new TimelineMax(); .fromTo() .fromTo() .staggerFromTo() .staggerFromTo()
.staggerFromTo()
ෳͷཁૉΛ·ͱΊͯಈ͔͢ .staggerFromTo('[id^="build"]', 1, {scale: 0, transformOrigin: '50% 100%'}, {cycle: {scale:
[1, .9, 1.1]}, ease: Bounce.easeOut}, '0.2', '-=0.2') 0.2ඵ͓͖ʹ
͞ΒʹෳͷཁૉΛ·ͱΊͯಈ͔͢ .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ඵ͓͖ʹ
.from() .to() .fromTo() .set() .staggerFrom() .staggerTo() .staggerFromTo() ͜Ε͚֮ͩ͑ͱ͚ಈ͔ͤΔ
ͱʹ͔͘ λΠϜϥΠϯػೳ͕ࡉ͔͍ௐʹޮ͘
λΠϜϥΠϯΛؔԽͯ͠ɺΠϕϯτϦεφΛόΠϯυ function timeline() { var tl = new TimelineMax(); tl.fromTo('#obj1',
3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } $('#obj1').on('click', function(){ timeline.play(); })
ෳͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ 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; }
εϐʔυޙ͔ΒௐՄೳ masterTl.timeScale(3).play(); ్த͔Βಈ͔ͨ͠Γ masterTl.seek("myLabel").play();
TweenMaxΛ͓͚ͬͯ ޙ͔ΒͰඍௐ͕༰қ
Unique SVGͳΒͰͳ͜ͱ
SVG Ұຕֆ ͷʮதʯΛಈ͔ͤΔ
New Tab SVG
SVG ň ଐੑ ʯň CSS ʯͰਤܗ͕࡞ΒΕ͍ͯΔ
<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"/>
ଐੑͷಈ͔ͤΔʢviewBoxʣ
ଐੑͷಈ͔ͤΔʢfilterʣ
࠷৽ͷ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; }
͔ͬͨ͜͠Ͱ͔͢ʁ
SVG Animation CSS web fonts Data Visualization Filter Effect Accessibility
σβΠφʔͷͨΊͷSVGجૅ+Ξχϝʔγϣϯ 松⽥直樹 Basics & Animations ͋Γ͕ͱ͏͍͟͝·ͨ͠