12/12/2011 SVG Slides, Printed Version
SVG Anima ion
SVG Anima ion: In od c ion Wha , Ho , When Wha i anima ed? Common A ib e Anima ion F nc ion Rela ion hip o SMIL Anima ion S le Anima ing P ope ie /A ib e Anima ing d A ib e Anima ing oke-da hoff e and Te Off e anima eT an fo m Elemen Addi i e Anima ion P e do 3D T an fo med Pa h Anima e S mbol Anima ed F idge Con ol e Elemen Changing Vi ibili Changing Vi ibili anima eColo Elemen anima eMo ion Elemen Anima e along Pa h Anima e Mo ion E ample O he Mo ion Pa h Anima ing Fon Si e, Off e and Te Pa h Ho Ho i Anima ion Pe fo med? T pe Ho A ib e al e A ib e al e E ample al e E ample Anima ing Te E ample Anima ing Clip Pa h Anima ing Pa e n ke Time E ample ke Time calcMode Ke Spline In e pola ion E ample Ke Spline In e pola ion Ball Bo ncing Linea Spline Fla h Walk in SVG SVG Di c e e Walk SVG Ke Val e Walk SVG Ke Spline Walk SWF SVG Handc af ing Anima ing man Ci cle When When i Anima ion Pe fo med? Timing A ib e S nch oni a ion E en Anima ion onclick and e Chaining Anima ion Chaining: IP Ne o k Re a ing an Anima ion
C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/ /printed_slidessvg_f.xml 1/30 12/12/2011 SVG Slides, Printed Version SVG Animation: Introduction
SVG Animation = change element attributes d namicall Animation is controlled through a set of animation elements Reusing parts of W3C's SMIL2.0 Specification (S nchroni ed Multimedia Integration Language Version 2.0) Declarative s nta , no real increase in file si e Animation is performed on client side Aspects to describe: Wha can be animated? Ho does animation take place? When does animation occur?
What, Ho , When
What Ho A ib e F om To Range P ope ie Di c e e Poin Clipping Val e Range Pa e n Paced Vie bo Spline
When Begin ime A e en On click
C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/ /printed_slidessvg_f.xml 2/30 12/12/2011 SVG Slides, Printed Version
What is animated?
P ac icall all a ib e and p ope ie can be changed XML: coo dina e , pa h e p e ion, fil e cha ac e i ic , ... CSS: colo , i ibili , opaci , ... Anima ion elemen anima e: anima e mo a ib e and p ope ie anima eMo ion: anima e mo ion along a pa h anima eColo : anima e be een colo al e anima eT an fo m: con ol an fo ma ion ( o a e, an la e, e c) e : change di c e e al e (eg, di pla )
E amples: