(87) 【SVG画像】Rectのアニメーション

投稿者: | 2020年5月19日

この記事は最終更新から 523日 が経過しています。

1. やりたいこと

Snap.svgを使って、矩形のベクタ画像の位置とサイズを変化させてみたい。

2. やってみる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00087 demo1</title>
</head>
<body>

<svg id="svg_rect" class="svg_rect_class" viewBox="0 0 290 150">
  <defs>
    <style>
        .svg_rect_class{
            fill: none;
            stroke: #f00;
            stroke-miterlimit: 10;
            stroke-width: 2px;
        }
    </style>
  </defs>
  <rect id="rect1" x="37.5" y="20" width="180" height="90"/>
</svg>

<script src="./snap.svg-min.js"></script>
<script>
obj_svg = Snap('#svg_rect');
obj_rect = obj_svg.select('#rect1');
function anim_svg(){
  obj_rect.animate({'x':27.3, 'y':5,  'width': 245, 'height': 120}, 1000, function(){
    this.animate({  'x': 6.5, 'y':12, 'width': 120, 'height':  40}, 1000, function(){
      this.animate({'x':37.5, 'y':20, 'width': 180, 'height':  90}, 1000, function(){
        anim_svg();
      });
    });
  });
};
anim_svg();
</script>

</body>
</html>

解説

・25行目 : 制御対象の SVG画像を取得する。
・26行目 : 変化させたい対象の要素を取得する。今回の場合は rectタグを対象とする。
・28行目~30行目の animation関数でアニメーションさせている。
・JSON形式で矩形の属性を指定している。
 → ここでは x, y, width, heightの 4種類の属性を指定しているが、変化させたい属性だけを指定すればよい。
・アニメーション実行時間は、三つとも 1,000[ms]と指定している。

3. 所感

・Snap.svgは便利だなぁ


カテゴリー: SVG

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)