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
860
働くこと、作ること、生きること
chy
0
1.2k
クリエイティブとシステマティック
chy
0
1.1k
Other Decks in Technology
See All in Technology
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
580
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
320
モダンフロントエンド 開発研修
recruitengineers
PRO
3
380
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
690
JOAI発表資料 @ 関東kaggler会
joai_committee
1
350
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
140
TypeScript入門
recruitengineers
PRO
20
6.8k
ECS モニタリング手法大整理
yendoooo
1
120
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
310
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
Webアクセシビリティ入門
recruitengineers
PRO
1
270
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Balancing Empowerment & Direction
lara
2
590
The Pragmatic Product Professional
lauravandoore
36
6.8k
Code Review Best Practice
trishagee
70
19k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Invisible Side of Design
smashingmag
301
51k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠