SVGとアニメーション２〜pathを描くようなアニメーション

HTML&CSS
2016.03.16

CSS3を使用したアニメーションの例です。
ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。

サンプル

スポンサーリンク

SVGコード

ハートのパスはIllustratorで描き、SVGで書き出しをしてその際にSVGコードをコピーしてHTMLに貼り付けたものです。そのときに不要なコードは削除しています。

その後適当なクラス名を指定して、あとはCSSの設定を行うだけです。
どんなパスでもクラス名で同様のCSSを適用するだけで同様のアニメーションを作成することができます。

HTMLコード

<svg viewBox="0 0 800 500">
<path class="demo_svg type01" d="M359,329 c-140-81-95-200-1-148C440,124,490,248,359,329Z" />
</svg>

CSSのポイント

  • stroke：線の色
  • fill：塗り色
  • stroke-width：線幅
  • fill-opacity：必要に応じて塗りの透明度
  • animation：@keyframeの指定とアニメーションする時間やイージングなどの設定
  • animation-fill-mode: forwards：アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持
  • stroke-dasharray：破線を作成
  • stroke-dashoffset：線の位置を指定

stroke-dasharray、stroke-dashoffsetの数値はパスの長さ（実際の長さ以上の値ならOK）に設定します。
stroke-dasharrayで破線の間隔（線が入らない空白部分）をpathの長さに指定すると最初は透明なハートが描かれた状態になります。これをstroke-dashoffset:0にすると破線部分が消えて実線に変わりハートの輪郭の線が引かれます。この操作をアニメーションするとあたかもハートを描いているように描画されるのです。
つまり、このアニメーション設定をSVGのpathにクラスで指定すると常にそのpathを描いているように見えます。
変更するのはstroke-dasharrayとstroke-dashoffsetをpathの実際の長さに変更するだけです。

CSSコード

.demo_svg {
        stroke: #000;
        fill: red;
        stroke-width: 2;
        fill-opacity: 0;
        -webkit-animation: SVG-anim01 4s ease 1;
        animation: SVG-anim01 4s ease 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        stroke-dasharray: 530;
        stroke-dashoffset: 530;
    }
    
    @-webkit-keyframes SVG-anim01 {
       0% {
            stroke-dashoffset: 530;
        }
        90% {
            stroke-dashoffset: 0;
            fill-opacity: 0;
        }
        100% {
            fill-opacity: 1;
            stroke-dashoffset: 0;
        }
    }
    
    @keyframes SVG-anim01 {
        0% {
            stroke-dashoffset: 530;
        }
        90% {
            stroke-dashoffset: 0;
            fill-opacity: 0;
        }
        100% {
            fill-opacity: 1;
            stroke-dashoffset: 0;
        }
    }

参考：正確にパスの長さを取得するには次のコードでアラートのパスの長さが表示されますので、その値を使うと良いでしょう。今回はJavaScriptは使用しないため、あくまで仮のスクリプトです。

alert(document.querySelector( '.demo_svg' ).getTotalLength())
スポンサーリンク
タイトルとURLをコピーしました