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
1.7k
デザイナーのためのSVG基礎 + アニメーション
クリエイティブハント2019
松田 直樹さんのセッション
クリエイティブハント山口
October 19, 2019
Tweet
Share
More Decks by クリエイティブハント山口
See All by クリエイティブハント山口
山口県を元気にするクリエイティブビジネスの役割
chy
0
700
働くこと、作ること、生きること
chy
0
1k
クリエイティブとシステマティック
chy
0
940
Other Decks in Technology
See All in Technology
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
380
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
260
Vos logs méritent mieux que la config par défaut
lyrixx
2
380
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
バッチ処理のSLOをどう設計するか
rynsuke
7
580
期待しすぎずに取り組む両面 TypeScript
shozawa
4
490
依存ライブラリはどこに?
takesection
0
110
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
Why do you get AWS certificates
hirosys
0
120
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
160
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Documentation Writing (for coders)
carmenintech
59
3.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Designing for Performance
lara
601
67k
Happy Clients
brianwarren
91
6.3k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠