blob: 0d70f03fe84244fdacaf7c223eef1e947ed48c0c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: SVG animation with SMIL
slug: Web/SVG/SVG_animation_with_SMIL
translation_of: Web/SVG/SVG_animation_with_SMIL
---
<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p>
<ul>
<li>要素の数値属性 (x, y など) のアニメーション</li>
<li>トランスフォーム属性 (translation または rotation) のアニメーション</li>
<li>色属性のアニメーション</li>
<li>モーションパスに従う</li>
</ul>
<p>これらは {{ SVGElement("animate") }} のような SVG 要素を、アニメーションさせる SVG 要素の中に追加することで実現します。以下は、4 つのアニメーション方法を例として示します。</p>
<h2 id="要素の属性のアニメーション">要素の属性のアニメーション</h2>
<p>以下の例は、円 (circle) の <strong>cx</strong> 属性のアニメーションを行います。そのために、{{ SVGElement("circle") }} 要素の内部に {{ SVGElement("animate") }} 要素を追加します。{{ SVGElement("animate") }} の重要な属性は以下のとおりです:</p>
<dl>
<dt><strong>attributeName</strong></dt>
<dd>アニメーションを行う属性名</dd>
<dt>from</dt>
<dd>属性の初期状態の値</dd>
<dt>to</dt>
<dd>属性の最後の値</dd>
<dt>dur</dt>
<dd>アニメーションを行う時間 (例えば、5秒の場合は '5s' と書く)</dd>
</dl>
<p>同じ要素でより多くの属性のアニメーションを行いたい場合は、{{ SVGElement("animate") }} 要素を追加してください。</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>Attribute Animation with SMIL</title>
</head>
<body>
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
</body>
</html>
</pre>
<h2 id="トランスフォーム属性のアニメーション">トランスフォーム属性のアニメーション</h2>
<p>{{ SVGElement("animateTransform") }} 要素は、<strong>トランスフォーム</strong> 属性のアニメーションを可能にします。数値をとる <strong>x</strong> のような、単純な属性のアニメーションを行うのではないため、この新しい要素が必要です。Rotation 属性はこのようなものです: <code>rotation(theta, x, y)</code>。ここで <code>theta</code> は角度、<code>x</code> および <code>y</code> は絶対位置を示します。以下の例では、回転の中心位置と角度のアニメーションを行います。</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>SVG SMIL Animate with transform</title>
</head>
<body>
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
<!-- 0 度から 360 度までの回転と、x 方向に 60 から 100 への移動を行う -->
from="0 60 60"
to="360 100 60"
<!-- 図形が存在しなくなるまでアニメーションを続ける -->
repeatCount="indefinite"
/>
</rect>
</svg>
</body>
</html>
</pre>
<h2 id="パスに従うアニメーション">パスに従うアニメーション</h2>
<p>The {{ SVGElement("animateMotion") }} 要素は、パスに従った SVG 要素の位置や回転のアニメーションを可能にします。パスは {{ SVGElement("path") }} と同じ方法で定義されます。オブジェクトがパスの接線に沿って回転するかを定義する属性を設定することができます。</p>
<h3 id="例_1_直線的な移動">例 1: 直線的な移動</h3>
<p>この例では、青い円 (circle) が黒い四角形の左端と右端をバウンドするように、無限に行き来します。このアニメーションは {{ SVGElement("animateMotion") }} 要素で制御されます。ここでは、アニメーションの始点を定義する <strong>M</strong>oveTo コマンド、円を 300 ピクセル右へ移動する <strong>H</strong>orizontal-line コマンド、そしてパスを閉じて始点へ戻ることを定義する <strong>Z</strong> コマンドで構成されるパスを指定しています。<strong>repeatCount</strong> 属性の値を <code>indefinite</code> にすることで、SVG 画像が存在する間は永久にアニメーションを繰り返すよう指定します。</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>SVG SMIL Animate with Path</title>
</head>
<body>
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
</rect>
</svg>
</body>
</html>
</pre>
<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p>
<h3 id="例_2_曲線状の移動">例 2: 曲線状の移動</h3>
<p>前と同様の例を、曲線状のパスを用い、またパスの方向に従い回転するようにしたものです。</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>SVG SMIL Animate with Path</title>
</head>
<body>
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="0" width="20" height="50" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 50,100 Q40,75 90,70Q95,60 95,50Q180,40 170,100Z"
dur="3s" repeatCount="indefinite" rotate="auto">
</rect>
</svg>
</body>
</html>
</pre>
<h2 id="参考情報">参考情報</h2>
<ul>
<li><a href="/ja/SVG" title="en/SVG">SVG</a></li>
<li><a class="external" href="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li>
<li><a class="external" href="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li>
</ul>
|
