SVGアニメーション – Web Animations API を使う – pathに沿ったアニメーションについて

javascript

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>

サーバ上のHTMLはこちら(test1.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>

サーバ上のHTMLはこちら(test2.html)

画面にアクセスすると、アニメーションする側のSVG図形が、
CSSの「offset-path」で定義したパスに沿ってアニメーションすることがわかります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です