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
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
150
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
300
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
Witchcraft for Memory
pocke
1
670
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
5
1.8k
asken AI勉強会(Android)
tadashi_sato
0
150
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Site-Speed That Sticks
csswizardry
10
670
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
BBQ
matthewcrist
89
9.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
184
22k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠