javascript（animeのpathでsvg画像をなぞる）
■anime.min.js の試し２。
anime.min.js の Documentation を見ながらもう少しサンプルを試してみる。基本的には、指定したオブジェクトのx, y, z軸での移動や回転ができるよう。あと、svgの画像ファイルに沿ってオブジェクトを移動させるといったこともできた。
そのサンプルが下。samplePic の方は移動、回転の試し。
html
<html>
<head>
<meta charset="utf-8">
<link href="aniSample02.css" rel="stylesheet" type="text/css">
<script src="../anime.min.js" defer></script>
<script src="./aniSample02.js" defer></script>
</head>
<body>
<div data-x="10" class="samplePic"></div>
<div class="motion-path">
<div class="el" style="transform: translateX(144.098px) translateY(95.9919px) rotate(180deg);"></div>
<svg width="1200" height="1000" viewBox="0 0 1200 1000">
<path fill="none" stroke="currentColor" stroke-width="1"
d="M199.91,.5C89.78,.5,.5,89.78,.5,199.91s89.28,199.41,199.41,199.41,199.41-89.28,199.41-199.41S310.04,.5,199.91,.5Zm132.35,331.76H67.56V67.56H332.26V332.26Z"></path>
</svg>
</div>
</body>
</html>css
.samplePic {
width: 10px;
height: 10px;
background: Red;
}
.el {
width: 20px;
height: 20px;
background: Red;
}javascript
let path2 = anime.path('.motion-path path');
anime({
targets: '.motion-path .el',
translateX: path2('x'),
translateY: path2('y'),
easing: 'linear',
duration: 6000,
loop: true
});
anime({
targets: '.samplePic',
translateX: 300,
translateY: 800,
rotateX: 360,
rotateY: 900,
easing: 'linear',
duration: 4000,
loop: true
});実行結果が下。赤いオブジェクトの大きい方が、円と正方形の線に沿って動く。
一筆書きでできるような図は線に沿って動かせるだろうけど、上のような飛び飛びになっている図形では、一周回った後にもう一方の画像に飛んでからなぞるように動いた。
svg画像はIllustratorで作成。「選択範囲を書き出し」でsvg画像を作り、メモ帳からpathタグ内の情報を取得。Illustrator で作成する画像ならこういったやり方である程度svg画像を作れるかもしれない。
