999 views
この記事は最終更新から 1832日 が経過しています。
1. やりたいこと
前回の投稿 (82) 【SVG画像】WEBブラウザ上でアニメーションさせる。(JavaScript編#1 Snap.svg) で使用した Snap.svg をもう少し使ってみる。
今回は…
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