(83) 【SVG画像】WEBブラウザ上でアニメーションさせる。(JavaScript編#2 Snap.svg)

投稿者: | 2020年2月9日

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

1. やりたいこと

前回の投稿 (82) 【SVG画像】WEBブラウザ上でアニメーションさせる。(JavaScript編#1 Snap.svg) で使用した Snap.svg をもう少し使ってみる。

http://snapsvg.io/

今回は…
Snap.svgの機能を使ってベクタ画像を作成し、これをアニメーションさせてみる。

2. やってみる

(1) SVGで円を描画する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (1)</title>
</head>
<body>

<script src="./snap.svg-min.js"></script>

<svg id="svgdemo" width="100%" height="300"></svg>

<script>
    svg = Snap('#svgdemo');
    svg.circle(100, 100, 50);    // cx, cy, r
</script>

</body>
</html>

(2) SVGで円を描画し、移動する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (2)</title>
</head>
<body>

<script src="./snap.svg-min.js"></script>

<svg id="svgdemo" width="100%" height="300"></svg>

<script>
  svg = Snap('#svgdemo'),
  circle = svg.circle(0, 100, 50);

  function anim(){
    circle.attr({cx:0});
    circle.animate({cx:1000}, 5000, function(){
      anim();
    });
  };
  anim();
</script>

</body>
</html>

(3) SVGで円を描画し、移動しながら拡大する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (3)</title>
</head>
<body>

<script src="./snap.svg-min.js"></script>

<svg id="svgdemo" width="100%" height="300"></svg>

<script>
  svg = Snap('#svgdemo'),
  circle = svg.circle(0, 100, 50);

  function anim(){
    circle.attr({cx:0, r:50});
    circle.animate({cx:1000, r:90}, 5000, function(){
      anim();
    });
  };
  anim();
</script>

</body>
</html>

(4) SVGで矩形を描画し、移動、変形、塗りつぶし色を変化させる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (4)</title>
</head>
<body>

<script src="./snap.svg-min.js"></script>

<svg id="svgdemo" width="100%" height="300"></svg>

<script>
  svg = Snap('#svgdemo'),
  rect = svg.rect(0, 0, 100, 100, 0, 0);    // x, y, width, height, rx, ry

  function anim(){
    rect.attr(   {x:0,    width:100, height:100, rx:0,  ry:0,  fill:"#000"});
    rect.animate({x:1000, width:300, height:30,  rx:15, ry:15, fill:"#F00"}, 5000, function(){
      anim();
    });
  };
  anim();
</script>

</body>
</html>

(5) SVGで矩形を描画し、移動しながら透過度を変化させる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (5)</title>
</head>
<body>

<script src="./snap.svg-min.js"></script>

<svg id="svgdemo" width="100%" height="300"></svg>

<script>
  svg = Snap('#svgdemo'),
  rect = svg.rect(0, 0, 100, 100, 20, 20);    // x, y, width, height, rx, ry

  function anim(){
    rect.attr(   {x:0,    opacity:0});
    rect.animate({x:1000, opacity:1}, 5000, function(){
      anim();
    });
  };
  anim();
</script>

</body>
</html>

x. 謝辞

有用な情報をありがとうございます。

http://snapsvg.io/docs/
https://ferret-plus.com/7522


カテゴリー: SVG

コメントを残す

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


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