animaosmil

HelderdaRocha(helder@argonavis.com.br)

AnimaoemSVGcomSMIL
Maissimplesquescrip.ng,pormmenossuportenosbrowsers
Chrome,Opera,FF4emdiante),IE9.0(suporteparcial)

Elementoseatributosparaanimaodegrcosegrupos
BaseadosnaespecicaoSMILSynchronizedMul:media
Integra:onLanguage(h7p://www.w3.org/TR/smilanima?on/)
EspecicaoSVGusapartedoSMILeacrescentaextenses:
h7p://www.w3.org/TR/SVG/animate.html
Suportascrip.ng,eventos,es.loeoperaescomSVGDOM

Elementos

argonavis.com.br

SMIL:<animate>,<set>,<animateColor>,<animateMo:on>
Extenses:<animateMo:on>com<mpath>,<animateTransform>

Oalvodaanimaopodeserindicadodeduasformas
viaxlink:href="#id"
sendooelementopaideumbloco<animate>,<set>,etc.
2

Animaobsica
Aformamaissimplesdeanimaoconsisteemvariarovalor
deumatributodeumelemento,pordeterminadadurao
PodeserumatributodoCSSoudoXML

Osvaloresemcadainstantesocalculadosporinterpolao

Ainformaomnimapodeserumvalornal,pardevalores,etc.
Valoresintermediriossocalculadosporinterpolao
Podesepassarmaisvaloresintermedirios,paramaiorcontrole

argonavis.com.br

Exemplo:Aoclicarnoretngulovermelho,eleirmoverse
paraadireitaatcarsoboretnguloazul,em3segundos
<rectx="50"y="50"width="100"height="50"fill="red">
<animate attributeName="x"to="200"dur="3s"
begin="click"fill="freeze"/>
</rect>
<rectx="200"y="50"width="100"height="50"fill="blue"
opacity="0.5"/>
3

<animate>

argonavis.com.br

Atributosessenciais

aLributeName:nomedoatributoqueterseuvaloralterado
(deveconterumvalorinterpolvel*)
from:valorinicial(senoes.verpresente,serconsideradoo
valoratualdoatributo)
to:valorquesera.ngidonomdaanimao
by:alterna.vaatobysomadoafromparaobtervalornal
dur:tempoqueirduraraanimao(ovalorpodeserexpresso
emvriosformatosdetempo)
begin:ocorrnciasquecausarooinciodaanimao
.picamenteumeventoouinstante(senohouverbegin,a
animaocomeaquandooelementoforcarregado)
ll:oqueacontecequandoaanimaotermina.Podeserfreeze
(ol.moestadopreservado)ouremove(voltaaoestado
antesdaanimaoiniciar)

Osvaloresdosatributospodemserdiferenteseterem
outrossignicados,emdiferentescontextos

*Oqueouno'interpolvel'dependedeoutrosatributos.Ex:nmerosgeralmenteso;stringssvezes.

Ml:plasanimaes
Podeseterml.ploselementos<animate>,cadaumlidandocom
umaanimaoespecca
<rectx="50"y="50"width="100"
height="50"fill="red">
<animateattributeName="x"to="200"dur="3s"
begin="click"fill="freeze"/>
<animateattributeName="fill"to="yellow"
dur="3s"begin="click"fill="freeze"/>
</rect>

argonavis.com.br

1s

3s

0s
2s

<set>
Aceitaosmesmosatributosque<animate>,mas
simplesmentemudaoatributo(semanimao)
Oatributodurnestecasorepresentaotempoemqueoatributo
permanecealterado
Nonaldotempo,elevoltaaovaloranterior(amenosquese
denall="freeze")

argonavis.com.br

<rectx="50"y="50"width="100"height="50"fill="red">
<setattributeName="x"to="200"begin="click"fill="freeze"/>
<setattributeName="fill"to="yellow"dur="3s"begin="click"fill="remove"/>
</rect>
<rectx="200"y="50"width="100"height="50"fill="blue"opacity="0.5">
<setattributeName="x"to="50"dur="3s"begin="click"fill="remove"/>
</rect>

0s(depoisdoclick)
3s

Atributosdetempo
Atributosdetempo(max,min,end,dur,repeatDur)aceitamtempo
expressonasseguintessintaxes

argonavis.com.br

02:30:03

=2horas,30minutose3segundos

50:00:10.25
02:33

=50horas,10segundose250ms
=2minutosand33seconds

00:10.5
3.2h

=10.5segundos=10se500ms
=3.2horas=3horase12minutos

45min
30s

5ms

=45minutos
=30segundos
=5milissegundos

12.467

=12segundose467milissegundos

Ex:<animatedur="10s"...>
7

Atributosdetemporizao
begin=""

Listadevaloresqueespecicaquandoaanimaoinicia(podeconter
umtempo,evento,refernciaaoutraanimao,oucombinaesde
tudoisto)
VejasintaxedetalhadanaspecSVGseo19.2.6
Ex:begin="click+3s"

end=""

Aceitavaloressimilaresabegin

restart="always|whenNotAc.ve|never"
Seaanimaodevereiniciar,ecomo

argonavis.com.br

repeatCount="nmero|indenite"

Nmerodevezesqueaanimaodeverepe.r
Seindenite,animaorepeteatodocumentoterminar

repeatDur="tempo|indenite"

Duraototalparaasrepe.es
Seindenite,animaorepeteatodocumentoterminar
8

Animaesadi:vasecumula:vas
Atributoaddi:ve="sum|replace"
Seforsum,valordoatributosomadoavalor
anterior,prexistente,ouvalordeanimaesde
menorprioridade(denidasantes)
Seforreplace(default)valoresprviossoignorados

argonavis.com.br

Atributoaccumulate="none|sum"
Consideradoparaanimaesqueserepetem
Seforsum,cadarepe.onovapartedovalornal
doatributonaanimaoanterior
Sefornone(default)cadarepe.oindependente
9

values
Valoresdoatributoaseremusadosnocursodaanimao
Segmentaopermitemaiscontrolequefrombyoufromto
Valoresdevemserseparadosporpontoevrgula
ComooobjetosemovenotempodependedoatributocalcMode

argonavis.com.br

Exemplo:opeixelevaomesmotempoparaatravessarcadatrecho
<svgxmlns="http://www.w3.org/2000/svg">
<imageid="abissal"xlink:href="TheFish.png"
height="100"width="250"x="50"y="50"/>
<gstroke="blue"strokewidth="2">
<linex1="200"x2="200"y1="175"y2="225"/>...</g>...
<animateattributeName="x"
values="50;150;200;500"
dur="4s"begin="click"
fill="freeze"
xlink:href="#abissal"/>
</svg>
10

AtributocalcMode
Modocomocalculadaaanimao
calcMode="linear|discrete|paced|spline"

argonavis.com.br

linear:interpolaolinearsimplescalculavalores
intermediriosentreospontos
discrete:duranteotempodaanimao,saltadeumvalor
paraooutro(permaneceumtempoemcadavalor)
paced:mdiadosvaloresusadaparaobteruma
velocidadeconstanteentreopontoinicialenal
spline:calculaumafunodetemponolinear,com
dadosfornecidosseparadamente(atributokeySplines)

Paravaloresnumricos,defaultlinear
Paravaloresnointerpolveis,comostrings,default(e
nicovalorpermi.do)discrete
11

Modosdeinterpolaolineares
<animatedur="30s"
values="0;1;2;4;8;15"
calcMode="discrete"/>

argonavis.com.br

<animatedur="30s"
values="0;1;2;4;8;15"
calcMode="linear"/>

<animatedur="30s"
values="0;1;2;4;8;15"
calcMode="paced"/>

Fonte:W3CSMILspec

12

Intervalosirregulares:keyTimes
Comvaluesotempo(dur)divididoempartesiguaispara
cadasegmento
Ex:havendo4valores,edur="4s",cadasegmentodura1s

ComoatributokeyTimes,possvelinformarquanto
tempopermaneceremcadasegmento
Valoresentre0e1,representandouminstante:valor
acumula.voeproporcionalduraodaanimao
Cadavalorsucessivodevesermaiorouigualaovaloranterior
Oprimeirovalordevesersempre0

argonavis.com.br

Paraanimaolinearouspline,ol:movalordeveser1

Esteatributoestrelacionadocomoatributovalues
CadavaloremkeyTimesestrelacionadoaumvaloremvalues
precisotermesmonmerodevaloresemkeyTimesevalues
13

ExemplocomvaluesekeyTimes
H3intervalos:0.00.1,0.1a0.9,0.9a1.0
Avelocidadenoprimeiroel.motrechoamesma(opeixepassa
10%dotempoemcadaum)
Opeixeleva80%dotempoparapercorrerotrechointermedirio

argonavis.com.br

<svgxmlns="http://www.w3.org/2000/svg"width="100%"height="100%">
<imageid="abissal"xlink:href="TheFish.png"height="100"width="250"
x="50"y="50"/>
<gstroke="blue"strokewidth="2">...</g>
<animateattributeName="x"values="50;200;350;500"dur="4s"
begin="click"keyTimes="0.0;0.1;0.9;1.0"fill="freeze"
xlink:href="#abissal"/>
</svg>

0s

0.4s

3.6s

14

Movimentonolinear:keySplines
Possibilitavariaonolineardomovimento
OatributokeySplinesdeneumconjuntodepontosde
controleBziercbicosdenemumafunoque
determinacomovariaotempodeumsegmento
CadapontodecontroleBzierconsistedequatrovaloresx1,y1
x2,y2(doispontosdecontroleporsegmento)

argonavis.com.br

Valoresnafaixade0a1
calcModedeveserspline
Ospontossoseparadosporpontoevrgula

RelacionamentoentreosatributoskeySplines,keyTimese
values:
ParacadanvaloresdekeyTimesevalues,devehavern1
pontosdecontroleBzier
15

ExemploscomkeySplines(W3C)
SogrcosdevariaodeTEMPO(nodeespao)!

(1)

<animatedur="4s"values="10;20"keyTimes="0;1"
calcMode="spline"keySplines="0,01,1">

20

(2)

15

<animatedur="4s"values="10;20"
keyTimes="0;1"
calcMode="spline"
keySplines="0.5,00.5,1">

10

0s1s2s3s4s
01

(3)

argonavis.com.br

<animatedur="4s"values="10;20"
keyTimes="0;1"
calcMode="spline"
keySplines="0,0.750.25,1">

(4)

<animatedur="4s"values="10;20"keyTimes="0;1"
calcMode="spline"keySplines="1,00.25,0.25">
Fonte:W3C(specSVG,19.2.7)

16

ExemplocomkeySplines
Noprimeirotrecho,omovimentolinear(grco1slideanterior)
Nosegundotrecho,opeixecomeadevagar,aceleranomeioe
depoisdesacelera(grco2)
Noterceirotrecho,opeixedisparanoincioedepoisvai
gradualmentedesacelerandoatparar(grco3)

argonavis.com.br

<animateattributeName="x" values="50;200;350;500"
dur="4s" keyTimes="0;0.333;0.667;1"
begin="click" keySplines="0.0,0.01.0,1.0;
0.5,0.00.5,1.0;
0.0,0.750.25,1.0;"
calcMode="spline"
fill="freeze"
xlink:href="#abissal"/>

17

<animateMo:on>
Permitefazerqueumobjetosemovaporumcaminho(path).
Ocaminhopodeserreferenciadodetrsformas
Atributoxlink:href="#path"(refernciaparaum<path>)
Elementolho<mpathxlink:href="#path"/>
Atributopath:mesmasintaxedoatributoddoelemento<path>

AtributokeyPoints
CadavalorkeyTimespodeserassociadoaumpontodocaminho
Valoresentre0e1(proporodadistnciapercorrida)

argonavis.com.br

Atributorotate="nmero|auto|autoreverse"
Serotateforauto,objetocarsemprealinhadocomovetor
tangencialdomovimento;autoreverse=auto+180graus.
Seforumnmero,onguloxoderotaodoobjetosobreoeixox.
ParavariaronguloduranteaexecuopodeseusarJavaScript.
18

Sintaxedeatributoscomuns
from,by,to,values
Em<animateMo:on>essesatributosrecebemumparde
valores,representandocoordenadasx,y
Ex:values="20,50;50;100;100;100"

keyPoints,keyTimes,keySplines
SekeyPointsforusado,valuesignorado.
Sepathou<mpath>forusado,valuesignorado.
Sevaluesforusado,from,byetosoignorados
OvalordefaultdecalcModepaced,logokeyTimesser
ignoradopordefault:parausar,mudeovalorparalinear
oudiscrete)
keySplinessuportadonormalmente

argonavis.com.br

19

Exemplode<animateMo:on>
Opeixegirandoemrbitaelp.ca

argonavis.com.br

Eleaceleraquandose
aproximadoSol

<pathid="orbita"strokewidth="1"...
d="M20,175
A244,22001,0493,175
A244,22000,020,175"/>
<imageid="abissal"x="0"y="100"
xlink:href="TheFish.png"
height="80"width="200">
<animateMotiondur="10s"

repeatCount="indefinite"

rotate="auto"

calcMode="spline"

keyTimes="0;1"

keyPoints="0;1"
keySplines="0.75,0.25

0.25,0.75">
<mpathxlink:href="#orbita"/>
</animateMotion>
</image>

20

<animateColor>

argonavis.com.br

<animateColor>permitevariaracorde
preenchimentooudecontornoaolongodotempo
Osatributosfrom,byeto
ouvaluesrecebemvalores
decor(ex:#f,red,
rgb(100%,0,0),etc.)
Ainterpolaofeita
percorrendovaloresentre
coresdeacordocomo
espaosRGB(padro)
omesmoalgoritmousado
paracomputargradientes

GamutsRGB

<animateColorvalues="red,pink,yellow,blue".../>
<animateColorfrom="rgb(0,0,0)"to="rgb(255,255,255)".../>
21

<animateTransform>
Permitequeaanimaovarieodeslocamento,rotao,
escalaoucisalhamentodeumobjeto
Atributotype="translate|scale|rotate|skewX|skewY"
Determinao.podetransformao

Atributosfrom,byeto
Recebemvalorcompa}velcomo.podetransformao

Atributovalues
Recebelistadevaloresseparadosporpontoevrgula

argonavis.com.br

OefeitodeanimaestoindenidoemSVG.
Recomendaseusarfromto,frombyouvalues(enoapenas
todevidoformacomoopera,valorinicialindenido)
Atransformaomul.plicadaaoefeitodasanimaes
anteriores(quandoatributoaddi:ve="sum")*
*VejamaisnaspecSVG,seo19.2.14

22

Exemplode<animateTransform>

argonavis.com.br

Vriasanimaessimultneaseadi.vas
<imagexlink:href="TheFish.png"height="80"width="200"x="50"y="50">
<animateTransformtype="rotate"from="0"to="15"attributeName="transform"
dur="2s"begin="click"fill="freeze"/>
<animateTransformtype="translate"to="300,0"fill="freeze"
dur="2s"begin="click"calcMode="spline"attributeName="transform"
keyTimes="0;1"keySplines="0.0,0.50.5,1.0"additive="sum"/>
<animateTransformtype="rotate"to="30"attributeName="transform"
dur="4s"begin="click+1.5s"additive="sum"fill="freeze"/>
<animateTransformtype="translate"to="200,0"attributeName="transform"
dur="4s"begin="click+5s"calcMode="spline"fill="freeze"
keyTimes="0;1"keySplines="0.25,0.750.25,1.0"additive="sum"/>
<animateTransformtype="rotate"to="15"attributeName="transform"
dur="6s"begin="click+10s"additive="sum"
keyTimes="0;1"keySplines="0.25,0.750.25,1.0"fill="freeze"/>
</image>

23