SVGアニメーション – Web Animations API を使う – pathに沿ったアニメーションについて
これまではSVGの要素をjavascriptを使ってアニメーションする例がほとんどでした。
今回の投稿は少し経路を変えて、pathによるSVGにアニメーションを試してみます。
とあるオブジェクトをpathに沿ってアニメーションさせるには、幾通りの方法があるようです。
ここでは「SVGのanimateMotion定義でアニメーションする方法」と「CSSのoffset-path定義でパスを指定してアニメーションする方法」について試してみようと思います。
SVGのanimateMotion定義でアニメーションする方法
「animateMotion」はSVGにより定義されており、ある要素がモーションパスに沿って移動する方法です。
例として以前(https://propansystem.net/blog/8297)投稿した下記のSVG描画をあげます。
<path
d = "M 0,0 90,150 120,20 10,10"
stroke = "#999999"
stroke-width = "1"
fill = "#cccccc"
>
上記のSVG画像は画面上では三角形が描画されます。
このSVG画像を「モーションパスに沿って動く側」として考え、
次に「モーションパス側」を定義します。
モーションパス側の図形としては以前に投稿(https://propansystem.net/blog/8270)した中から、
polygon(多角形)のものを流用します。
<path
d = "M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z"
stroke = "#999999"
stroke-width = "3"
fill = "#eeeeee"
/>
ただし、この多角形のSVG画像をそのまま「animateMotion」として組み合わせても動作しません。
モーションパスの定義して、以下のように記述をします。
<animateMotion
dur = "10s"
repeatCount = "indefinite"
path = "M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z"
fill = "#eeeeee"
/>
上記2つの「パスに沿って動く側」と「モーションパスを定義する側」のSVG図形を組み合わせると
パスにそったアニメーションになります。
かんたんなサンプルを以下に用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<!-- アニメーション用パス(SVG) -->
<svg width="300" height="250">
<!-- モーション時にわかりやすいようにパス表示する -->
<!-- このpathの記述は書かなくてもanimateMotinoは動作する -->
<path
d = "M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z"
stroke = "#999999"
stroke-width = "3"
fill = "#eeeeee"
/>
<!-- パス上を移動するSVG図形 -->
<path
d = "M 0,0 90,150 120,20 10,10"
stroke = "#999999"
stroke-width = "1"
fill = "#cccccc"
>
<!-- モーションパスを定義するSVG図形 -->
<animateMotion
dur = "10s"
repeatCount = "indefinite"
path = "M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z"
fill = "#eeeeee"
/>
</path>
</svg>
</body>
</html>
画面にアクセスすると、モーションパス上を移動するSVG図形が表示され、アニメーション動作します。
CSSのoffset-path定義でパスを指定してアニメーションする方法
CSSの定義を用いたSVGアニメーションとして、以下の2つのCSS定義が重要です。
・offset-path
・offset-distance
前者の「offset-path」については、SVG図形をアニメーションさせる際のモーション(ガイド線)の役割をし、
後者の「offset-distance」については、どのようにモーションの上を動作させるかを決めます。
以下に簡単なサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
/* アニメーションする側のSVG図形 */
.elem1 {
width : 10px;
height : 10px;
offset-path : path('M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z');
offset-distance : 0;
animation : move 15000ms ease-in-out infinite alternate;
back
}
/* アニメーション時のパス表示 */
.elem2 {
position : absolute;
width : 300px;
height : 300px;
}
/* アニメーション定義 */
@keyframes move {
0% {offset-distance : 0%; }
100% {offset-distance : 100%; }
}
</style>
</head>
<body>
<!-- アニメーションする側のSVG図形 -->
<div class="elem1">
<svg width="300" height="300">
<g>
<path
d = "M 0,0 90,150 120,20 10,10"
stroke = "#999999"
stroke-width = "1"
fill = "#cccccc"
</path>
</g>
</svg>
</div>
<!-- アニメーション時のパスを表示する(この出力は無くても動作する) -->
<div class="elem2">
<svg width="300" height="300">
<g>
<path
d = "M20,50 10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165 z"
stroke = "#666666"
stroke-width = "3"
fill = "#999999"
/>
</g>
</svg>
</div>
</body>
</html>
画面にアクセスすると、アニメーションする側のSVG図形が、
CSSの「offset-path」で定義したパスに沿ってアニメーションすることがわかります。