javascript（svgの線を消すアニメーション）
■strokeDashoffsetを使って線を徐々に消す。
前回、svg画像の線に沿って別のオブジェクトを動かすアニメーションを試したけど、今回は線自体を徐々に消すものを試してみた。コードが下。
html
<html>
<head>
<meta charset="utf-8">
<link href="aniSample03.css" rel="stylesheet" type="text/css">
<script src="../anime.min.js" defer></script>
<script src="./aniSample03.js" defer></script>
</head>
<body>
<div class="pathsvg">
<div class="rectFig"></div>
<svg width="300" height="200">
<rect class="samplePath" fill="none" stroke="currentColor" stroke-width="1"
class="cls-1" x=".5" y=".5" width="85.04" height="28.35"/>
</svg>
</div>
</body>
</html>css
.rectFig {
width: 3px;
height: 3px;
background: Brown;
}
javascript
let path2 = anime.path('.pathsvg rect');
anime({
targets: '.pathsvg .rectFig',
translateX: path2('x'),
translateY: path2('y'),
easing: 'linear',
direction: 'reverse',
duration: 20000,
loop: true
});
anime({
targets: '.pathsvg .samplePath',
strokeDashoffset: [anime.setDashoffset, 50],
easing: 'linear',
duration: 20000,
direction: 'reverse',
loop: true
});実行結果が下。
実行直後。左上から茶色の四角オブジェクトが一周する。大きい方の四角は、幅: 85.04px, 高さ: 28.35px。Illustratorで、幅: 30mm, 高さ: 10mmで作成した後に、「選択範囲を書き出し」でsvgとして保存。一周が226.78px。オフセットで設定している 50px分が削られた状態から始まる。
durationで、20000 として設定しているので、20秒かかって一周する（又は消える）。
どちらも20000として設定しているので、最終的には小さな四角と大きな四角が左上で重なる。
cssでも下のようなコードで線を消すことができるよう（230は一周の226.78をカバーできる値として）。
.samplePath {
stroke-dasharray: 230;
animation: dash 5s linear;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 230;
}
}dash が点線なので230毎の点線を作った際に、上の四角では完全に消える範囲と出てくる範囲が作れる。その開始位置を徐々に動かすことで消えるように見せているものだと思う。
anime.jsの方もdashoffset と入っているので、原理としてはこのcssの設定を使用しているかも。
