パスに沿って描写されていくSVGアニメーションを
プラグインなしで実装したまとめ。
事前準備
- SVGデータの作成
- SVGデータをテキストエディタで開く
- htmlに直接貼り付ける
- pathにclass名を付与(今回はitem)
html
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.92 69.26">
<g>
<path class="item item1" d="M18.67,50.54a13.22,13.22,0,0,0,2.48,6.68q3.39,4,11.6,4a25,25,0,0,0,8-1.06q5.82-2,5.82-7.56a5.57,5.57,0,0,0-2.85-5,31,31,0,0,0-9-3.05L27.61,43q-10.4-2.3-14.29-5-6.59-4.51-6.59-14.1A18.73,18.73,0,0,1,13.18,9.38q6.45-5.79,18.93-5.79Q42.54,3.59,49.9,9T57.62,24.9H44.53a9.33,9.33,0,0,0-5.26-8.36,18,18,0,0,0-8.11-1.64A15.44,15.44,0,0,0,22.55,17,6.71,6.71,0,0,0,19.33,23a5.59,5.59,0,0,0,3.17,5.22q2,1.15,8.66,2.7l11.44,2.7q7.52,1.77,11.27,4.73,5.83,4.6,5.83,13.31A18.7,18.7,0,0,1,52.8,66.44q-6.9,5.9-19.51,5.9-12.87,0-20.25-5.81t-7.37-16Z" transform="translate(-5.42 -3.34)"/>
<path class="item item2" d="M107.39,5.49h14.15L99.32,70.66H86.45l-22-65.17H79L93.11,55Z" transform="translate(-5.42 -3.34)"/>
<path class="item item3" d="M173.47,25.83a12.76,12.76,0,0,0-7.56-9.33A18.57,18.57,0,0,0,158.43,15,16.24,16.24,0,0,0,145.5,21q-5.06,5.94-5.06,17.85t5.48,17a18,18,0,0,0,12.47,5,16.17,16.17,0,0,0,11.23-3.93A17,17,0,0,0,175,46.56H159.94V35.69h27.15v35h-9l-1.37-8.14A31.18,31.18,0,0,1,169.62,69a25,25,0,0,1-13.26,3.3q-13,0-21.22-9-8.62-9-8.62-24.66,0-15.82,8.71-25.36t23-9.54q12.42,0,20,6.3a23.43,23.43,0,0,1,8.64,15.72Z" transform="translate(-5.42 -3.34)"/>
</g>
</svg>
</body>
今回使ったSVG属性
- fill グラフィックの内部の色
- stroke アウトラインの色を定義する
- stroke-width アウトラインの太さ。デフォルトは1
- stroke-linejoin 角の形状miter,round,bevel
- stroke-dasharray 破線の長さ
- stroke-dashoffset 破線の開始位置
transitionで動かす場合
javascript
// ページの読み込みが全て完了したらclass付与
$(window).on('load', function(){
$('.item').addClass('is-active');
});
scss
@mixin item($delay) { // 引数に開始時間を遅らせる変数を入れる。
fill: transparent;
stroke: transparent;
stroke-width: 1;
stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
&.is-active {
stroke: #999;
stroke-dashoffset: 0; // 開始位値を0にする。
transition: stroke 1s ease-in $delay, stroke-dashoffset 1s ease-in $delay; // transition設定。
}
}
// pathの数だけ繰り返す。
@for $i from 1 through 3 {
.item#{$i} {
@include item($i*.25s); // 開始時間を0.25s遅らせる。
}
}
animationで動かす場合
javascriptの記述はなし
scss
@mixin item($delay) { // 引数に開始時間を遅らせる変数を入れる。
fill: transparent;
stroke: transparent;
stroke-width: 1;
stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
animation: stroke 1s ease-in $delay forwards; // animation追加。
}
// pathの数だけ繰り返す。
@for $i from 1 through 3 {
.item#{$i} {
@include item($i*0.25s); // 開始時間を0.25s遅らせる。
}
}
// animation設定。
@keyframes stroke {
0% {
}
100% {
stroke: #999;
stroke-dashoffset: 0;
}
完成！
See the Pen oqGwPz by kayukihashimoto (@kfunnytokyo) on CodePen.
*パスの長さは正確ではありません。
今回はパスの長さを超えるように、大まかに設定しています。
正確なパスの長さはgetTotalLength()を使って取得出来ます。
詳しくはこちらから
おわり。