公開日:2019-07-17 更新日:2020-02-02

Snap.svgでアウトラインアニメーションを作る方法【IE対応】

svgを使用したラインアニメーションにも色々あるかと思いますがこの記事ではアウトラインのアニメーションを紹介していこうと思います！

Snap.svgでアウトラインアニメーションを作る方法

まずは完成形をお見せします！

See the Pen <a href='https://codepen.io/tanukichi5/pen/QXeabM/'>snap.svgラインアニメーション</a> by ssk (<a href='https://codepen.io/tanukichi5'>@tanukichi5</a>) on <a href='https://codepen.io'>CodePen</a>.

Returnを押すともう一度再生されますよ！
スマホの場合はResultを押すとReturnが表示されると思います。
この作り方を以下で解説していきます！

まずはSnap.svgを読み込もう！

scriptタグで読み込む場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

npmで読み込む場合

npm install snapsvg imports-loader

const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

アニメーション用のSVGを準備！

僕はこんなかんじでフォトショで作りました。

作り方は色々あるのでお任せします！
完成したらsvg形式で書き出して下さい。

作成したSVGをhtmlに配置

「hiraku blog」のSVGコードです。長いですゴメンナサイ...
svgタグにidsvg-logo
pathタグにidsvg-logo-path
を追加してます。

<svg id="svg-logo" width="900" height="178" viewBox="-2 -2 904 182">
  <path id="svg-logo-path" class="cls-1" d="M430.613,545.616a35.55,35.55,0,0,0-18.045,4.537,31.442,31.442,0,0,0-12.06,11.977V483.01h-16.5V623.647h16.866V588.442a34.476,34.476,0,0,1,2.991-14.518,24.292,24.292,0,0,1,8.252-10.161,20.279,20.279,0,0,1,11.788-3.629q6.889,0.181,10.337,3.811t3.807,9.979v49.723h17.047V568.118a21.489,21.489,0,0,0-7.072-16.241q-6.892-6.261-17.409-6.261h0Zm53.678,2.9v75.127h16.867V548.52H484.291Zm-1.27-27.039A8.605,8.605,0,0,0,486.1,528.2a10.38,10.38,0,0,0,7.074,2.721,10.053,10.053,0,0,0,6.981-2.721,9.028,9.028,0,0,0,0-13.429,10.049,10.049,0,0,0-6.981-2.722,10.376,10.376,0,0,0-7.074,2.722,8.609,8.609,0,0,0-3.083,6.714h0ZM546.855,566.3l-1.27-17.783H530.533v75.127H547.4v-34.3a26.967,26.967,0,0,1,3.717-13.7,26.3,26.3,0,0,1,10.337-10.072,27.615,27.615,0,0,1,14.779-3.267l0.727-16.875a30.769,30.769,0,0,0-10.519,2.721,41.875,41.875,0,0,0-11.333,7.259,33.338,33.338,0,0,0-8.253,10.888h0ZM660.2,548.52L658.928,560.5A34.01,34.01,0,0,0,647.5,549.608a32.245,32.245,0,0,0-16.684-4.173,38.815,38.815,0,0,0-19.5,4.99,36.541,36.541,0,0,0-13.964,14.154q-5.169,9.165-5.169,21.5t4.987,21.231a33.625,33.625,0,0,0,13.6,13.519,40.153,40.153,0,0,0,19.315,4.628,33.545,33.545,0,0,0,17.227-4.446,38.883,38.883,0,0,0,11.607-9.708v12.34H675.8V548.52H660.2Zm-25.571,62.968a23.936,23.936,0,0,1-12.7-3.538,27.22,27.22,0,0,1-9.339-36.112,24.01,24.01,0,0,1,9.068-9.164,24.592,24.592,0,0,1,12.422-3.266,26.226,26.226,0,0,1,15.778,4.99,23.154,23.154,0,0,1,9.067,12.975v14.88a23.026,23.026,0,0,1-8.433,14.063,25,25,0,0,1-15.867,5.172h0Zm120.415,12.159h19.766L743.436,578.1l27.747-22.321-10.338-9.073-38.809,31.212V483.01H705.171V623.647h16.865V595.519l9.794-7.984Zm93.574-75.127v35.022a34.447,34.447,0,0,1-2.991,14.518,25.577,25.577,0,0,1-8.07,10.252,18.589,18.589,0,0,1-11.244,3.721q-6.711-.18-10.064-3.9t-3.719-10.071V548.52H795.664v55.528q0.36,9.982,6.982,16.241t16.955,6.26a33.788,33.788,0,0,0,17.772-4.808,30.182,30.182,0,0,0,11.79-12.431l1.088,14.337h15.233V548.52H848.617Zm151.613-3.085A45.777,45.777,0,0,0,982,548.973a32.25,32.25,0,0,0-12.965,9.527V483.01H952.168V623.647h16.866V612.033a33.281,33.281,0,0,0,12.24,9.8,38.12,38.12,0,0,0,16.775,3.63,40.086,40.086,0,0,0,19.5-4.9,36.033,36.033,0,0,0,14.23-14.155q5.265-9.254,5.26-21.593a42.145,42.145,0,0,0-4.9-20.687,35.188,35.188,0,0,0-13.33-13.792,36.3,36.3,0,0,0-18.58-4.9h0Zm-5.808,65.509a26.1,26.1,0,0,1-16.321-5.263,24.4,24.4,0,0,1-9.067-13.428V577.01a23.023,23.023,0,0,1,9.158-13.156,27.181,27.181,0,0,1,16.23-4.991,24.766,24.766,0,0,1,12.878,3.447,25.2,25.2,0,0,1,9.16,9.347,26.2,26.2,0,0,1,3.35,13.156q0,11.253-7.16,18.69t-18.228,7.441h0ZM1059.71,483.01V623.647h16.86V483.01h-16.86Zm39.71,102.346a40.626,40.626,0,0,0,5.35,21.05,36.7,36.7,0,0,0,14.78,14.065,44.663,44.663,0,0,0,21.22,4.99,43.553,43.553,0,0,0,21.58-5.263,37.274,37.274,0,0,0,14.6-14.426,40.881,40.881,0,0,0,5.17-20.416,40.393,40.393,0,0,0-5.17-20.323,37.663,37.663,0,0,0-14.51-14.336,42.678,42.678,0,0,0-21.31-5.262,43.691,43.691,0,0,0-21.49,5.262,38.293,38.293,0,0,0-14.87,14.427,39.375,39.375,0,0,0-5.35,20.232h0Zm17.05,0.182a27.415,27.415,0,0,1,3.17-13.065,25.225,25.225,0,0,1,8.61-9.527,22.139,22.139,0,0,1,12.34-3.538,22.6,22.6,0,0,1,17.41,7.53,26.551,26.551,0,0,1,6.89,18.6q0,11.072-6.89,18.51a23.85,23.85,0,0,1-29.66,3.992,24.263,24.263,0,0,1-8.7-9.436,27.416,27.416,0,0,1-3.17-13.066h0Zm152.15-37.018-1.27,10.525q-3.99-5.988-12.15-9.8a41.485,41.485,0,0,0-17.77-3.811,38.075,38.075,0,0,0-19.41,5.262,39.272,39.272,0,0,0-14.41,14.427,42.109,42.109,0,0,0-.19,40.739A38.949,38.949,0,0,0,1217.3,620.2a36.124,36.124,0,0,0,19.04,5.263,39.232,39.232,0,0,0,18.59-4.265,30.088,30.088,0,0,0,12.24-11.341l-0.18,14.154q-0.2,10.161-6.98,16.151-6.81,5.988-19.32,5.988a30.7,30.7,0,0,1-13.6-2.994,50.293,50.293,0,0,1-12.33-8.8l-9.98,11.614a68.11,68.11,0,0,0,16.6,11.251q8.25,3.81,19.67,3.81,13.065,0,22.76-4.9a36.851,36.851,0,0,0,14.97-13.247,34.394,34.394,0,0,0,5.26-18.691V548.52h-15.42Zm-27.38,62.968a25.2,25.2,0,0,1-13.06-3.538,26.078,26.078,0,0,1-12.88-22.774q0-11.25,7.44-18.509a25.422,25.422,0,0,1,18.5-7.259,27.621,27.621,0,0,1,16.32,4.99,24.741,24.741,0,0,1,9.61,13.156v14.881a24.177,24.177,0,0,1-9.25,13.791,27.175,27.175,0,0,1-16.68,5.262h0Z" transform="translate(-384 -483)"/>
</svg>

cssでSVGの初期表示設定

cssで初期表示設定を行います。
ポイントはstroke-dasharrayとstroke-dashoffsetの値を同じにすることです。

この値は使うsvgによって異なります。
※結構適当でなんとかなります（笑）

svgのpathの長さはjavascriptのgetTotalLength()を使うことで取得出来ますが今回のような文字のロゴはうまく取得出来ません。※正確には一文字の長さが取得できなくて全部合わせた長さを取得してしまうから

#svg-logo {
  width: 100%;
  path {
    fill-opacity: 0;//塗りの透明度
    fill: #000;//塗りの色
    stroke: #000;//線の色
    stroke-width: 3;//線の幅
    stroke-linecap: round;//線を角丸
    stroke-dasharray: 600;//線の長さ
    stroke-dashoffset: 600;//線の間隔
  }
}

Snap.svgでアニメーションの設定をして完成！

アニメーション部分はlogoSvgPath.animate({**スタイル**},**時間（ミリ秒）**);で設定します。

var logoSvg = Snap('#svg-logo');//svgを指定
var logoSvgPath = logoSvg.select('#svg-logo-path');//svgのpathを指定

logoSvgPath.animate({'stroke-dashoffset': 0},4000);

今回の例は4秒かけてstroke-dashoffsetを0にするというものです。

別バージョンを紹介

この例は先程のアウトラインアニメーションからさらに塗りを追加したものです。

See the Pen <a href='https://codepen.io/tanukichi5/pen/QXepjq/'>snap.svgラインアニメーション塗り付き</a> by ssk (<a href='https://codepen.io/tanukichi5'>@tanukichi5</a>) on <a href='https://codepen.io'>CodePen</a>.

animateメソッドの第3引数にfunctionを渡す

先程のコードの第3引数のfunction内にさらにanimate追加しました。
アウトラインアニメーション→塗を連続したアニメーションになります。

var logoSvg = Snap('#svg-logo');//svgを指定
var logoSvgPath = logoSvg.select('#svg-logo-path');//svgのpathを指定

logoSvgPath.animate({'stroke-dashoffset': 0},4000, function() {
  logoSvgPath.animate({'fill-opacity': 1},800);
});

最後に

今回の方法は実はcssだけでも実現出来ます。
しかしそれではIEでは動きません。

Snap.svgを使用すればIEでも問題なく動きます。

アウトラインアニメーションはよくある手法なので覚えておくとどこかで使うかもしれません。
僕も実際案件で極たまにあるので今回の記事を作成しました。

以上です。

リンク

公開日:2019-07-17 更新日:2020-02-02

CODE