1,715 views
この記事は最終更新から 2319日 が経過しています。
1. やりたいこと
過去の投稿では CSSを利用したベクタ画像アニメーションを作ってみた。
でも…
CSSによるアニメーションではベクタ画像の頂点情報を時間変化させることができず
ベクタ画像をぐにゃぐにゃと変形させることが出来なかった。
自分が知らないだけの可能性もあるが…
そこで今回は…
JavaScriptを使用して SVGの属性を時間変化させたい。
すなわち…
ベクタ画像の頂点情報を時間変化させて図形をぐにゃぐにゃと動かしたい！
(1) 実現手段
今回は Snap.svg を利用させていただく。Snap.svgは Photoshopで有名なあの Adobe社が 2013年にオープンソースソフトウェアとして公開してくれたフリーのライブラリだ。
http://snapsvg.io/
(2) お題
過去投稿 (79) 【SVG画像】WEBブラウザにSVG画像を表示する。 で作成した星形ベクタ画像の頂点を動かし、★を歪ませたい。
2. やってみる
【Step 1】polygonタグの points属性の値を時間変化させる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00082 demo1</title>
</head>
<body>
<svg id="star-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 188.43 180.82">
<defs>
<style>
.cls-1{
fill:#efea3a;
stroke:#231815;
stroke-miterlimit:10;
stroke-width:6px;
}
</style>
</defs>
<title>returnアセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon id="star_poly" class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
</g>
</g>
</svg>
<script src="./snap.svg-min.js"></script>
<script>
svg = Snap('#star-svg');
poly = svg.select('#star_poly');
startPts = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22";
endPts = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 124.54 26.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 162.04 75.11 119.34 100.11 151.38 172.22";
function anim(){
poly.animate({'points':endPts}, 1000, function(){
this.animate({'points':startPts}, 1000, function(){
anim();
});
});
};
anim();
</script>
</body>
</html>
★解説★
この svgタグではベクタ画像を定義している。
過去投稿 (79) 【SVG画像】WEBブラウザにSVG画像を表示する。 で作成した星形画像だ。
<svg id="star-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 188.43 180.82">
<defs>
<style>
.cls-1{
fill:#efea3a;
stroke:#231815;
stroke-miterlimit:10;
stroke-width:6px;
}
</style>
</defs>
<title>returnアセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon id="star_poly" class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
</g>
</g>
</svg>
ここでは Snap.svg の JavaScriptファイルをロードしている。
<script src="./snap.svg-min.js"></script>
ここではアニメーション処理を実装している。
アニメーション開始時と終了時の 2セットの point属性値（＝頂点座標情報配列）を定義している。
polygonをアニメーション対象として、1000[ms]で順方向、1000[ms]で逆方向にアニメーションさせている。
<script>
svg = Snap('#star-svg');
poly = svg.select('#star_poly');
startPts = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22";
endPts = "151.38 172.22 96.34 145.21 42.89 175.23 51.57 124.54 26.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 162.04 75.11 119.34 100.11 151.38 172.22";
function anim(){
poly.animate({'points':endPts}, 1000, function(){
this.animate({'points':startPts}, 1000, function(){
anim();
});
});
};
anim();
</script>
★注意点★
・動作前、動作後の pointsの要素数を同じにすること。
3. 所感
・CSSアニメーションではスタイルで定義できるものしか動かせなかった。
・JavaScriptを使えば、タグの属性の値を動かすことが出来る。
→ ポリゴンの頂点情報（＝polygonタグの points属性）を動かすことができる。
→ 開始点と終了点を指定すれば、その中間点を内挿補完してくれる。
・この方法を使えばアニメーションで動かせるものの幅がすごく広がる！
4. 謝辞
有益な情報をありがとうございます。
https://ferret-plus.com/7522
https://hacknote.jp/archives/24829/
https://capotast.co.jp/article/detail/33/
https://www.evoworx.co.jp/blog/svg-symbol/