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.2k
デザイナーのためのSVG基礎 + アニメーション
クリエイティブハント2019
松田 直樹さんのセッション
クリエイティブハント山口
October 19, 2019
Tweet
Share
More Decks by クリエイティブハント山口
See All by クリエイティブハント山口
山口県を元気にするクリエイティブビジネスの役割
chy
0
850
働くこと、作ること、生きること
chy
0
1.2k
クリエイティブとシステマティック
chy
0
1.1k
Other Decks in Technology
See All in Technology
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
470
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
390
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
220
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
P2P通信の標準化 WebRTCを知ろう
faithandbrave
1
330
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
120
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
360
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Applications with DynamoDB
mza
95
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
For a Future-Friendly Web
brad_frost
179
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Statistics for Hackers
jakevdp
799
220k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠