Embed Size (px)
Citation preview
argo
navi
s.co
m.b
r AnimaçãoemSVGcomSMIL
• Maissimplesquescrip.ng,porémmenossuportenosbrowsers• Chrome,Opera,FF4emdiante),IE9.0(suporteparcial)
• Elementoseatributosparaanimaçãodegráficosegrupos• BaseadosnaespecificaçãoSMIL–SynchronizedMul:media
Integra:onLanguage(h7p://www.w3.org/TR/smil‐anima?on/)
• EspecificaçãoSVGusapartedoSMILeacrescentaextensões:h7p://www.w3.org/TR/SVG/animate.html
• Suportascrip.ng,eventos,es.loeoperaçõescomSVGDOM
• Elementos• SMIL:<animate>,<set>,<animateColor>,<animateMo:on>
• Extensões:<animateMo:on>com<mpath>,<animateTransform>
• Oalvodaanimaçãopodeserindicadodeduasformas• viaxlink:href="#id"• sendooelementopaideumbloco<animate>,<set>,etc.
2
argo
navi
s.co
m.b
r Animaçãobásica
• Aformamaissimplesdeanimaçãoconsisteemvariarovalordeumatributodeumelemento,pordeterminadaduração• PodeserumatributodoCSSoudoXML
• Osvaloresemcadainstantesãocalculadosporinterpolação• Ainformaçãomínimapodeserumvalorfinal,pardevalores,etc.• Valoresintermediáriossãocalculadosporinterpolação• Pode‐sepassarmaisvaloresintermediários,paramaiorcontrole
• Exemplo:Aoclicarnoretângulovermelho,eleirámover‐separaadireitaatéficarsoboretânguloazul,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
argo
navi
s.co
m.b
r <animate>
• Atributosessenciais• aLributeName:nomedoatributoqueteráseuvaloralterado
(deveconterumvalorinterpolável*)• from:valorinicial(senãoes.verpresente,seráconsideradoo
valoratualdoatributo)• to:valorqueseráa.ngidonofimdaanimação• by:alterna.vaato–byésomadoafromparaobtervalorfinal• dur:tempoqueiráduraraanimação(ovalorpodeserexpresso
emváriosformatosdetempo)• begin:ocorrênciasquecausarãooiníciodaanimação–
.picamenteumeventoouinstante(senãohouverbegin,aanimaçãocomeçaquandooelementoforcarregado)
• fill:oqueacontecequandoaanimaçãotermina.Podeserfreeze(oúl.moestadoépreservado)ouremove(voltaaoestadoantesdaanimaçãoiniciar)
• Osvaloresdosatributospodemserdiferenteseteremoutrossignificados,emdiferentescontextos
4*Oqueéounão'interpolável'dependedeoutrosatributos.Ex:númerosgeralmentesão;stringsàsvezes.
argo
navi
s.co
m.b
r Múl:plasanimações
• Pode‐setermúl.ploselementos<animate>,cadaumlidandocomumaanimaçãoespecífica<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>
5
0s
1s
2s
3s
argo
navi
s.co
m.b
r <set>
• Aceitaosmesmosatributosque<animate>,massimplesmentemudaoatributo(semanimação)• Oatributodurnestecasorepresentaotempoemqueoatributo
permanecealterado
• Nofinaldotempo,elevoltaaovaloranterior(amenosquesedefinafill="freeze")
6
0s(depoisdoclick)
<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>
3s
argo
navi
s.co
m.b
r Atributosdetempo
• Atributosdetempo(max,min,end,dur,repeatDur)aceitamtempoexpressonasseguintessintaxes• 02:30:03 =2horas,30minutose3segundos
• 50:00:10.25 =50horas,10segundose250ms
• 02:33 =2minutosand33seconds
• 00:10.5 =10.5segundos=10se500ms
• 3.2h =3.2horas=3horase12minutos
• 45min =45minutos
• 30s =30segundos
• 5ms =5milissegundos
• 12.467 =12segundose467milissegundos
• Ex:<animatedur="10s"...>
7
argo
navi
s.co
m.b
r Atributosdetemporização
• begin=""• Listadevaloresqueespecificaquandoaanimaçãoinicia(podeconter
umtempo,evento,referênciaaoutraanimação,oucombinaçõesdetudoisto)
• VejasintaxedetalhadanaspecSVGseção19.2.6• Ex:begin="click+3s"
• end=""• Aceitavaloressimilaresabegin
• restart="always|whenNotAc.ve|never"• Seaanimaçãodevereiniciar,ecomo
• repeatCount="número|indefinite"• Númerodevezesqueaanimaçãodeverepe.r• Seindefinite,animaçãorepeteatéodocumentoterminar
• repeatDur="tempo|indefinite"• Duraçãototalparaasrepe.ções• Seindefinite,animaçãorepeteatéodocumentoterminar
8
argo
navi
s.co
m.b
r Animaçõesadi:vasecumula:vas
• Atributoaddi:ve="sum|replace"• Seforsum,valordoatributoésomadoavaloranterior,pré‐existente,ouvalordeanimaçõesdemenorprioridade(definidasantes)
• Seforreplace(default)valorespréviossãoignorados• Atributoaccumulate="none|sum"• Consideradoparaanimaçõesqueserepetem
• Seforsum,cadarepe.çãonovapartedovalorfinaldoatributonaanimaçãoanterior
• Sefornone(default)cadarepe.çãoéindependente
9
argo
navi
s.co
m.b
r values
• Valoresdoatributoaseremusadosnocursodaanimação• Segmentaçãopermitemaiscontrolequefrom‐byoufrom‐to
• Valoresdevemserseparadosporponto‐e‐vírgula
• ComooobjetosemovenotempodependedoatributocalcMode
• Exemplo:opeixelevaomesmotempoparaatravessarcadatrecho
10
<svgxmlns="http://www.w3.org/2000/svg"><imageid="abissal"xlink:href="TheFish.png"height="100"width="250"x="50"y="50"/><gstroke="blue"stroke‐width="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>
argo
navi
s.co
m.b
r AtributocalcMode
• Modocomoécalculadaaanimação• calcMode="linear|discrete|paced|spline"
• linear:interpolaçãolinearsimplescalculavaloresintermediáriosentreospontos
• discrete:duranteotempodaanimação,saltadeumvalorparaooutro(permaneceumtempoemcadavalor)
• paced:médiadosvaloreséusadaparaobterumavelocidadeconstanteentreopontoinicialefinal
• spline:calculaumafunçãodetemponão‐linear,comdadosfornecidosseparadamente(atributokeySplines)
• Paravaloresnuméricos,defaultélinear• Paravaloresnãointerpoláveis,comostrings,default(eúnicovalorpermi.do)édiscrete
11
argo
navi
s.co
m.b
r Modosdeinterpolaçãolineares
12Fonte:W3CSMILspec
<animatedur="30s"values="0;1;2;4;8;15"calcMode="discrete"/>
<animatedur="30s"values="0;1;2;4;8;15"calcMode="linear"/>
<animatedur="30s"values="0;1;2;4;8;15"calcMode="paced"/>
argo
navi
s.co
m.b
r Intervalosirregulares:keyTimes
• Comvaluesotempo(dur)édivididoempartesiguaisparacadasegmento• Ex:havendo4valores,edur="4s",cadasegmentodura1s
• ComoatributokeyTimes,épossívelinformarquantotempopermaneceremcadasegmento• Valoresentre0e1,representandouminstante:valor
acumula.voeproporcionalàduraçãodaanimação
• Cadavalorsucessivodevesermaiorouigualaovaloranterior
• Oprimeirovalordevesersempre0
• Paraanimaçãolinearouspline,oúl:movalordeveser1
• Esteatributoestárelacionadocomoatributovalues• CadavaloremkeyTimesestárelacionadoaumvaloremvalues
• ÉprecisotermesmonúmerodevaloresemkeyTimesevalues
13
argo
navi
s.co
m.b
r ExemplocomvaluesekeyTimes
• Há3intervalos:0.0–0.1,0.1a0.9,0.9a1.0• Avelocidadenoprimeiroeúl.motrechoéamesma(opeixepassa
10%dotempoemcadaum)
• Opeixeleva80%dotempoparapercorrerotrechointermediário
14
<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"stroke‐width="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
argo
navi
s.co
m.b
r Movimentonão‐linear:keySplines
• Possibilitavariaçãonão‐lineardomovimento
• OatributokeySplinesdefineumconjuntodepontosdecontroleBéziercúbicosdefinemumafunçãoquedeterminacomovariaotempodeumsegmento• CadapontodecontroleBézierconsistedequatrovaloresx1,y1
x2,y2(doispontosdecontroleporsegmento)
• Valoresnafaixade0a1• calcModedeveserspline
• Ospontossãoseparadosporponto‐e‐vírgula• RelacionamentoentreosatributoskeySplines,keyTimese
values:• ParacadanvaloresdekeyTimesevalues,devehavern‐1
pontosdecontroleBézier
15
argo
navi
s.co
m.b
r ExemploscomkeySplines(W3C)
16Fonte:W3C(specSVG,19.2.7)
<animatedur="4s"values="10;20"keyTimes="0;1"calcMode="spline"keySplines="0,01,1">
<animatedur="4s"values="10;20"keyTimes="0;1"calcMode="spline"keySplines="0.5,00.5,1">
<animatedur="4s"values="10;20"keyTimes="0;1"calcMode="spline"keySplines="0,0.750.25,1">
<animatedur="4s"values="10;20"keyTimes="0;1"calcMode="spline"keySplines="1,00.25,0.25">
0s1s2s3s4s01
20
15
10
SãográficosdevariaçãodeTEMPO(nãodeespaço)!(1)
(2)
(3)
(4)
argo
navi
s.co
m.b
r ExemplocomkeySplines
• Noprimeirotrecho,omovimentoélinear(gráfico1–slideanterior)• Nosegundotrecho,opeixecomeçadevagar,aceleranomeioe
depoisdesacelera(gráfico2)• Noterceirotrecho,opeixedisparanoinícioedepoisvai
gradualmentedesacelerandoatéparar(gráfico3)
17
<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"/>
argo
navi
s.co
m.b
r <animateMo:on>
• Permitefazerqueumobjetosemovaporumcaminho(path).
• Ocaminhopodeserreferenciadodetrêsformas• Atributoxlink:href="#path"(referênciaparaum<path>)
• Elementofilho<mpathxlink:href="#path"/>
• Atributopath:mesmasintaxedoatributoddoelemento<path>
• AtributokeyPoints• CadavalorkeyTimespodeserassociadoaumpontodocaminho
• Valoresentre0e1(proporçãodadistânciapercorrida)• Atributorotate="número|auto|auto‐reverse"
• Serotateforauto,objetoficarásemprealinhadocomovetortangencialdomovimento;auto‐reverse=auto+180graus.
• Seforumnúmero,éoângulofixoderotaçãodoobjetosobreoeixox.
• Paravariaroânguloduranteaexecuçãopode‐seusarJavaScript.
18
argo
navi
s.co
m.b
r Sintaxedeatributoscomuns
• from,by,to,values• Em<animateMo:on>essesatributosrecebemumpardevalores,representandocoordenadasx,y
• Ex:values="20,50;50;100;100;100"• keyPoints,keyTimes,keySplines
• SekeyPointsforusado,valueséignorado.• Sepathou<mpath>forusado,valueséignorado.
• Sevaluesforusado,from,byetosãoignorados• OvalordefaultdecalcModeépaced,logokeyTimesserá
ignoradopordefault:parausar,mudeovalorparalinearoudiscrete)
• keySplinesésuportadonormalmente
19
argo
navi
s.co
m.b
r Exemplode<animateMo:on>
• Opeixegirandoemórbitaelíp.ca• Eleaceleraquandose
aproximadoSol
20
<pathid="orbita"stroke‐width="1"...d="M20,175A244,22001,0493,175A244,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>
argo
navi
s.co
m.b
r <animateColor>
• <animateColor>permitevariaracordepreenchimentooudecontornoaolongodotempo• Osatributosfrom,byetoouvaluesrecebemvaloresdecor(ex:#fff,red,rgb(100%,0,0),etc.)
• AinterpolaçãoéfeitapercorrendovaloresentrecoresdeacordocomoespaçosRGB(padrão)
• Éomesmoalgoritmousadoparacomputargradientes
21
GamutsRGB
<animateColorvalues="red,pink,yellow,blue".../><animateColorfrom="rgb(0,0,0)"to="rgb(255,255,255)".../>
argo
navi
s.co
m.b
r <animateTransform>
• Permitequeaanimaçãovarieodeslocamento,rotação,escalaoucisalhamentodeumobjeto
• Atributotype="translate|scale|rotate|skewX|skewY"• Determinao.podetransformação
• Atributosfrom,byeto• Recebemvalorcompa}velcomo.podetransformação
• Atributovalues• Recebelistadevaloresseparadosporponto‐e‐vírgula
• OefeitodeanimaçõestoéindefinidoemSVG.• Recomenda‐seusarfrom‐to,from‐byouvalues(enãoapenas
to–devidoàformacomoopera,valorinicialéindefinido)
• Atransformaçãoémul.plicadaaoefeitodasanimaçõesanteriores(quandoatributoaddi:ve="sum")*
22*VejamaisnaspecSVG,seção19.2.14
argo
navi
s.co
m.b
r Exemplode<animateTransform>
23
<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>
• Váriasanimaçõessimultâneaseadi.vas
