SVGアニメーション – CSS要素を使う
CSSアニメーション要素を使ってSVG画像をアニメーションさせます。
まずは、元となるSVG画像を表示するのみのサンプルです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<polygon
class="anim1"
points="10 15 25 120 50 180 75 95 98 250 105 140 130 175 135 210 150 135"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
</body>
</html>
画面にアクセスすると多角形が表示されます。
この多角形に、classを指定し、CSSでclass名を指定してアニーメーションの命令を書きます。
サンプル全体です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.anim1 {
stroke: #000000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: test_anim1 10s ease-in 0s;
animation: test_anim1 10s ease-in 0s;
}
@-webkit-keyframes test_anim1 {
0% {
stroke-dashoffset: 2000;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<polygon
class="anim1"
points="10 15 25 120 50 180 75 95 98 250 105 140 130 175 135 210 150 135"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
</body>
</html>
画面にアクセスすると、多角形の頂点の座標から順に stroke が描画されることがわかります。
CSSの記述は以下です。
<style>
.anim1 {
stroke: #000000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: test_anim1 10s ease-in 0s;
animation: test_anim1 10s ease-in 0s;
}
@-webkit-keyframes test_anim1 {
0% {
stroke-dashoffset: 2000;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
アニメーションの命令部分は「-webkit-animation: test_anim1 10s ease-in 0s;」と「animation: test_anim1 10s ease-in 0s;」から
「test_anim1」の指定で、「@-webkit-keyframes test_anim1」以下の内容を描画しています。
アニメーション開始時には「0%」のタグの内容を描画し、「10s」で10秒かけて「100%」のタグの内容までアニメーション描画をしています。
画面アクセスすると、線が徐々に描画されるように見えますが、これは「stroke-dashoffset」の破線の間隔を徐々に小さくなるように変化させている為、
線が描画されているように見えます。
試しに、上記のtest2.htmlのサンプルの内容を、以下のように変更してみます。
stroke-dasharray: 2000; を、↓に変更 stroke-dasharray: 10; -webkit-animation: test_anim1 10s ease-in 0s; animation: test_anim1 10s ease-in 0s; を、↓に変更 -webkit-animation: test_anim1 50s ease-in 0s; animation: test_anim1 50s ease-in 0s;
全体的には以下になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.anim1 {
stroke: #000000;
stroke-dasharray: 10;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: test_anim1 50s ease-in 0s;
animation: test_anim1 50s ease-in 0s;
}
@-webkit-keyframes test_anim1 {
0% {
stroke-dashoffset: 2000;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<polygon
class="anim1"
points="10 15 25 120 50 180 75 95 98 250 105 140 130 175 135 210 150 135"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
</body>
</html>
画面にアクセスすると、さきほどのサンプルと同様の多角形の線分が10ピクセル単位の破線になり、その破線の「stroke-dashoffset: 2000;」が50秒の間で「stroke-dashoffset: 0;」に変化する。
という出力結果になります。
同じ内容のアニメーション指定方法ですが、パラメータが異なると描画のされ方も大きく異なることがわかります。
同様に、円(circle)のパス情報に対しても、同じCSSのパラメータ変化によるアニメーションを試してみます。
サンプルの多角形のSVGの箇所を、下記の円(circle)のパスに置き換えてみます。
<svg width="500" height="300" viewBox="0 0 500 300">
<circle
class="anim1"
cx="110"
cy="110"
r="100"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
全体のサンプルは以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.anim1 {
stroke: #000000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: test_anim1 10s ease-in 0s;
animation: test_anim1 10s ease-in 0s;
}
@-webkit-keyframes test_anim1 {
0% {
stroke-dashoffset: 2000;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<circle
class="anim1"
cx="110"
cy="110"
r="100"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
</body>
</html>
画面にアクセスすると、円(circle)のパスが起点から、時計回りに360度の線分が描画されることがわかります。