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」で定義したパスに沿ってアニメーションすることがわかります。