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
|
---
title: Animação SVG com SMIL
slug: Web/SVG/SVG_animation_with_SMIL
tags:
- Animação
- Animação de SVG
- Firefox 4
- Gecko 2.0
- SVG
translation_of: Web/SVG/SVG_animation_with_SMIL
original_slug: Web/SVG/SVG_animacao_com_SMIL
---
<div class="warning">
<p>Embora o Chrome 45 tenha revogado SMIL em favor das animações CSS e da Web, os programadores do Chrome suspenderam essa revogação.</p>
</div>
<p>Firefox 4 introduziu suporte para a animação de <a href="/en/SVG" title="en/SVG">SVG</a> utilizando <a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL permite-lhe:</p>
<ul>
<li>animate the numeric attributes of an element (x, y, ...)</li>
<li>animate transform attributes (translation or rotation)</li>
<li>animate color attributes</li>
<li>follow a motion path</li>
</ul>
<p>This is done adding an SVG element like <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside the SVG element to animate. Below are examples for the four different ways.</p>
<h2 id="Animar_atributos_de_um_elemento">Animar atributos de um elemento</h2>
<p>The following example animates the <strong>cx</strong> attribute of a circle. To do so, we add an <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} element inside the </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("circle") }} element. The important attributes for </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} are:</span></p>
<dl>
<dt><strong>attributeName</strong></dt>
<dd>The name of the attribute to animate.</dd>
<dt>from</dt>
<dd>The initial value of the attribute.</dd>
<dt>to</dt>
<dd>The final value.</dd>
<dt>dur</dt>
<dd>The duration of the animation (for example, write '5s' for 5 seconds).</dd>
</dl>
<p>If you want to animate more attributes inside the same element, just add more {{ SVGElement("animate") }} elements.</p>
<pre class="brush: html"><svg width="300" height="100">
<title>Attribute Animation with SMIL</title>
<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="500"
dur="5s" repeatCount="indefinite" />
</circle>
</svg></pre>
<p>{{ EmbedLiveSample('Animating_attributes_of_an_element', '100%', 120) }}</p>
<h2 id="Animar_os_atributos_transform">Animar os atributos "transform"</h2>
<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateTransform") }} element let you animate <strong>transform</strong> attributes. This new element is necessary because we are not animating a simple attribute like <strong>x</strong> which is just a number. Rotation attributes look like this: <code>rotation(theta, x, y)</code>, where <code>theta</code> is the angle in degrees, and <code>x</code> and <code>y</code> are absolute positions. In the example below, we animate the center of the rotation and the angle.</span></p>
<pre class="brush: html"><svg width="300" height="100">
<title>SVG SMIL Animate with transform</title>
<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">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 100 60"
repeatCount="indefinite"
/>
</rect>
</svg>
</pre>
<p>{{ EmbedLiveSample('Animating_the_transform_attributes', '100%', 120) }}</p>
<h2 id="Animation_following_a_path">Animation following a path</h2>
<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateMotion") }} element lets you animate an element position and rotation according to a path. </span>The path is defined the same way as in <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("path") }}. You can set the attribute to define whether the object rotates following the tangent of the path. </span></p>
<h3 id="Example_1_Linear_motion">Example 1: Linear motion</h3>
<p>In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a <strong>M</strong>oveTo command to establish the starting point for the animation, then the <strong>H</strong>orizontal-line command to move the circle 300 pixels to the right, followed by the <strong>Z</strong> command, which closes the path, establishing a loop back to the beginning. By setting the value of the <strong>repeatCount</strong> attribute to <code>indefinite</code>, we indicate that the animation should loop forever, as long as the SVG image exists.</p>
<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<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>
</pre>
<p>{{ EmbedLiveSample('Example_1_Linear_motion', '100%', 120) }}</p>
<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p>
<h3 id="Example_2_Curved_motion">Example 2: Curved motion</h3>
<p>Same example as before with a curved path and following the direction of the path.</p>
<pre class="brush: html"><svg width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
<animateMotion
path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
dur="3s" repeatCount="indefinite" rotate="auto" />
</rect>
</svg>
</pre>
<p>{{ EmbedLiveSample('Example_2_Curved_motion', '100%', 120) }}</p>
<h2 id="Consultar_também">Consultar também</h2>
<ul>
<li><a href="/pt-PT/docs/Web/SVG" title="en/SVG">SVG</a></li>
<li><a class="external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">Especificação de Animação de SVG</a></li>
<li><a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Especificação de SMIL</a></li>
</ul>
|
