12/12/2011 SVG Slides, Printed Version

SVG Animaion

SVG Animaion: Inodcion Wha, Ho, When Wha i animaed? Common Aibe Animaion Fncion Relaionhip o SMIL Animaion Sle Animaing Popeie/Aibe Animaing d Aibe Animaing oke-dahoffe and Te Offe animaeTanfom Elemen Addiie Animaion Pedo 3D Tanfomed Pah Animae Smbol Animaed Fidge Conol eElemen Changing Viibili Changing Viibili animaeColo Elemen animaeMoion Elemen Animae along Pah Animae Moion Eample Ohe Moion Pah Animaing Fon Sie, Offe and Te Pah Ho Ho i Animaion Pefomed? Tpe Ho Aibe ale Aibe ale Eample ale Eample Animaing Te Eample Animaing Clip Pah Animaing Paen keTime Eample keTime calcMode Ke Spline Inepolaion Eample Ke Spline Inepolaion Ball Boncing Linea Spline Flah Walk in SVG SVG Dicee Walk SVG Ke Vale Walk SVG Ke Spline Walk SWF SVG Handcafing Animaing man Cicle When When i Animaion Pefomed? Timing Aibe Snchoniaion Een Animaion onclick and e Chaining Animaion Chaining: IP Neok Reaing an Animaion

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f. 1/30 12/12/2011 SVG Slides, Printed Version SVG : Introduction

SVG Animation = change element attributes dnamicall Animation is controlled through a set of animation elements Reusing parts of W3C's SMIL2.0 Specification (Snchronied Multimedia Integration Language Version 2.0) Declarative snta, no real increase in file sie 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 Aibe Fom To Range Popeie Dicee Poin Clipping Vale Range Paen Paced Viebo Spline

When Begin ime A een 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?

Pacicall all aibe and popeie can be changed XML: coodinae, pah epeion, file chaaceiic, ... CSS: colo, iibili, opaci, ... Animaion elemen animae: animae mo aibe and popeie animaeMoion: animae moion along a pah animaeColo: animae beeen colo ale animaeTanfom: conol anfomaion (oae, anlae, ec) e: change dicee ale (eg, dipla)

Eamples:

Common Attributes

Animaion elemen hae ome common aibe:

What is animated

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 3/30 12/12/2011 SVG Slides, Printed Version Animation Functions

Good Control of: When animation starts The sequence of values to be used How the values are changed over time Duration of animation Event triggering of animations Main points animate, animateTransform, animateMotion: main elements animateColor, set: mainl shorthands

Relationship to SMIL

Shared ith SMIL

animate attributes and properties assigned different values over time set shorthand for animate used for animating non-numeric values animateMotion moves an element along a motion path animateColor modifies the colour value of attributes or properties over time

SVG Onl Functions:

animateTransform modifies a transformation attribute over time mpath animateMotion can have an mpath child element as a motion path

Etensions to SMIL functions:

path attribute allows all SVG path data to be used in the path attribute of animateMotion kePoints attribute to animateMotion to provide precise control of the velocit of motion path animations rotate attribute additional attribute to animateMotion to keep the object orientated with the tangent vector

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 4/30 12/12/2011 SVG Slides, Printed Version Animation Stles

Animation b reference

Animation as part of the element (link:href is to parent)

<ec ="10" ="50" idh="150" heigh="75" >

fill aibe: freee eain image, remove emoe i) from, to: gie a and end ale fo he aibe o pope values: gie, in hi eample, he a and end ale fo he aibe o pope

Animating Properties/Attributes

Main Poin:

An nmbe of animaion can ake place ogehe Sa and op ime can a Time a hen pogam i loaded If no fill paamee, ee back o oignal ale Don' mi CSS and XML animaion on ame pope

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 5/30 12/12/2011 SVG Slides, Printed Version

Animaing d Aibe

Main poin: The o d' m mach in ce, ame nmbe of bpah, ce animaing o ce, line o line, boh cloed o boh open

Animaing oke-dahoffe and Te Offe

g h lei s S , g an o t do 's es a nd ta u 's s a n p le p n a a ig u S n h d s don , goe

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 6/30 12/12/2011 SVG Slides, Printed Version

animateTransform Element

Main points:

tpe attribute specifies tpe of transformation additive="sum" ensures two animations on same attribute both take place Alternativel nest elements and appl one transformation to each animateTransform cannot be replaced b the animate element

Additive Animations

Defaults

additive default is replace accumulate default is none

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 7/30 12/12/2011 SVG Slides, Printed Version Pedo 3D

<e e="f-ie:40;fi:gee"> Hgd

H g d

Tanfomed Pah

Rig i a ce i cicaed a g a ce defied b ac Fid he eidia ce (dah-ded) Deeie he egh f he eidia ah A -iia a f ah ih Beie ege Aach a aia aiaeTaf eee he ig eee The age i gie b: d = 180*e/(*i) [i degee] The aach a eee ag he eidia ah.

Aiaed Paea Die, iea aii behai

Pae gea' i defied b eaid ae af

h://.ece.de/

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 8/30 12/12/2011 SVG Slides, Printed Version Animate Smbols

<e link:hef="#a" ="60" ="30"/> ec

Animated Fridge Control

Refigeao defoing: animaeTanfom (anlae and cale)

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 9/30 12/12/2011 SVG Slides, Printed Version

setElement

Main points:

set element onl has the to attribute Can be used for most attributes, not restricted to enumeration tpes Often used for visibilit and displa (none, block) It is just a simple shorthand for animate

Changing Visibilit

Client Serer pro

dns

cache

images http://.3.org/anted.htm cookie

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 10/30 12/12/2011 SVG Slides, Printed Version

Changing Visibilit

0 0 _ 2 7 0 1 2 8 0 2 2 9 0 3 3 0 0 4 3 1 0 5 3 2 + 1 P C 0 6 3 3 P S 2 C N I 0 7 3 4 3 D C O 0 8 3 5 0 9 3 6 4 S = F C C 1 0 3 7 5 P + S C T 1 1 3 8 1 2 3 9 1 3 4 0 1 4 4 1 2 0 1 5 4 2 1 6 4 3 C 1 7 4 4 N 1 8 4 5 LZ Decode 1 9 4 6 2 0 4 7 2 1 I 2 2 20 01 12 12 00 19 28 12 25 00 33 00 02 33 19 00 06 37 37 43 29 2 3 2 4 2 5 2 6 T S, F

animateColor Element

Main poin:

An of he colo aibe ale ae alloed I i j a hohand fo he animae elemen Colo inepolaion can be lef o e agen o pecified a RGB o lineaRGB animateColor i depecaed in he eied SVG 1.1, e animate inead Fiefo doe no ppo all aian of animateColor b doe if he e animate

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xmlanimateMotion Element 11/30 12/12/2011 SVG Slides, Printed Version animateMotion Element

ao 45

ao-eee

Animate along Path

rotate="45" /> rotate="auto-reverse" /> rotate="90" />

Origin of object moes along path

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xmlAnimate Motion Eample 12/30 12/12/2011 SVG Slides, Printed Version Animate Motion Eample

Other Motion Paths

from and to can be used to define a straight path mpath can reference an eternal path

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 13/30 12/12/2011 SVG Slides, Printed Version Animating Font Sie, Offset and Text Path

h sleig , go e

s a's Sant u p n and do

How

Wha How Aibe Fom To Range Popeie Clipping Dicee Poin Paen Vale Range Vie bo Paced Spline

When Begin ime A een On click

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 14/30 12/12/2011 SVG Slides, Printed Version How is Animation Performed?

B default, animation is linear the [from,to] interval is interpolated linearl over required duration Alternative possibilities: discrete jumps (no interpolation) specif intermediate (ke) values and time replace linear interpolation b (cubic) splines (in [0,1]) ke times and spline interpolation can be combined

Tpes

SWF Model SVG Discrete SVG Linear Frame-based Stop Stop Stop

V V V a a a l l l u u u e e e

Start Start Start Start Time Stop Start Time Stop Start Time Stop

SVG Paced SVG keTimes, keValues SVG keSplines Stop Stop Stop

V V V a a a l l l u u u e e e

Start Start Start Start Time Stop Start Time Stop Start Time Stop

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 15/30 12/12/2011 SVG Slides, Printed Version How Attributes

from start value to end value b increment values a list of values (used a lot when ou have inbetweens) keTimes each time in the list corresponds to the equivalent values list item. Goes from 0 to 1 kePoints values defined as a fraction of the total length (0 to 1) calcMode discrete, linear, paced, spline keSplines for calcMode=spline, defines the Beier control points

values Attribute

15;615

15;45;615

15;465;615

15;40;225;150;450;495;615

Time li eall beeen ineal

615 Diance a elled

15 Time aed

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 16/30 12/12/2011 SVG Slides, Printed Version values Eample

values Eamples

tet position clipPath pattern (not described in detail)

Animating Tet Eample C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 17/30 12/12/2011 SVG Slides, Printed Version Animating Tet Eample

M e r . . . .

MerChistma

Animating Clip Path

Scalable clip path

Scalable Vector Graphics

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 18/30 12/12/2011 SVG Slides, Printed Version Animating Pattern

<ae id="a" ="0" ="0" idh="30" heigh="30" ef=" iibe" aeUi="eSaceOUe" ee eAecRai="MidYMid ee"> <ec ="0" ="0" idh="30" heigh="30" >

Sa

hp://pila.free.fr/

keTimes

0;0.25;0.5;0.75;1

0;0.07;0.2;0.467;1

0;0.533;0.8;0.93;1

0;0.4;0.5;0.6;1

: : : : . . M="" T="0;0.2;0.4;0.6;0.8;1" S="0.5 0 0.5 1;1 0 0.25 0.25;0 0.75 0.25 1;0.5 0 0.5 1;0 0.75 0.25 1" . .

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xmlKe Spline Interpolation 20/30 12/12/2011 SVG Slides, Printed Version Ke Spline Interpolation

0 0 1 1

.5 0 .5 1

0 .75 .25 1

1 0 .25 .25

(1,1) (1,1) (1,1) (1,1)

(0,0) (0,0) (0,0) (0,0)

Eample Ke Spline Interpolation

keSplines

keSplines 0.25 0 0.75 1 instant speed

Test animation

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xmlBall Bouncing 21/30 12/12/2011 SVG Slides, Printed Version Ball Boncing

linea peed

Linear Spline

calcMode="linea" calcMode="pline"

Anoine Qin

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xmlFlash Walk in SVG 22/30 12/12/2011 SVG Slides, Printed Version Flash Walk in SVG

Flash: 416 points; SVG: 107 points

SVG Discrete Walk

SVG Discrete: initiall 10 frames/sec, then 12.5 frames/sec then 20 frames per sec.

V a l u e

Time

SVG Ke Values Walk C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 23/30 12/12/2011 SVG Slides, Printed Version SVG Ke Values Walk

SWF Frame-based

SVG Ke Splines Walk

SVG keSplines

SWF v SVG Handcrafting C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 24/30 12/12/2011 SVG Slides, Printed Version SWF v SVG Handcrafting

Flash timeline SVG Spline Interpolation timeline

1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12

Arm front Arm front

Bod Bod

Calf front Calf front

Thigh front Thigh front

Calf back Calf back

Thigh back Thigh back

Arm back Arm back Original Drawing Original Drawing

Cop of Frame 1 then adjust Cop of Frame 1 then adjust

Inbetween + Modif Inbetween + Modif

Inbetween + Tweek

30 inbetweened objects 78 inbetweened objects 4 major frames 2 major frames 19 tweeked 0 tweeked

Animating man Circles

When C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 25/30 12/12/2011 SVG Slides, Printed Version When

Wha Ho Aibe Fom To Range Popeie Dicee Poin Clipping Vale Range Paen Paced Vie bo Spline

When Begin ime A een On click

When i Animaion Pefomed?

Simple cae: time-based animation begin, d, end aibe ale ae in ime (ih " = 0" ale a loading) all kind of ime ni ae a ailable Complicaed cae: eent-based animation begin= aibe can efe o eents: obj.click: hen a click occ on obj anim.end: hen anim end anim.begin: hen anim begin anim.end; anim2.end: hen anim or anim2 end anim.begin+4: 4 econd afe anim begin obj.moeo e: hen moe mo e o e obj obj.moeo: hen moe mo e aa fom obj ... Deailed emanic defined in SMIL 2.0

Timing Aibe C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 26/30 12/12/2011 SVG Slides, Printed Version Timing Attributes

d Daion in h:ho, min:mine, :econd, m:milliec, 03:20:09 (3 ho, 20 min, 9 ec) begin Saing ime, ma depend on ome ohe animaion end Ending ime min Minimm ime of he aci i ma Specifie he maimm ime of he aci i ea ala, ne e, henNoAci e epeaCon Nmbe of epea o 'indefinie' epeaD Toal daion fo epea fill emo e, feee (feee op animaion ih hei la ale)

Snchronisation

This has no repeatCount: it goes on forever!

Events C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 27/30 12/12/2011 SVG Slides, Printed Version Eents

click oe

don

begin="o eo.moeo e" aibeName="c" fom="100" o="150" /> begin="o eo.moeo" aibeName="c" fom="150" o="100" /> begin="donp.moedon" aibeName="c" fom="100" o="200" /> begin="donp.moep" aibeName="c" fom="200" o="100" /> begin="acceKe()" aibeName="" fom="50" o="100" /> Shif Ec folloed b in Opea

<e le="e-ancho:middle">click cic

Animation onclick and set

Topogaph

0 f Label

1200 f See 400 f Poin of Inee

800 f 800 f Feea

Legend

400 f 1200 f

0 f

Chaining Animations C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 28/30 12/12/2011 SVG Slides, Printed Version Chaining Animations

Chaining: IP Netork

Client Serv er

IP 161.73IP.206.11 Router Router Router Packet for 161.73.206.11 Router Router Router

Ethernet Router Router Router Ethernet Interface Interface

Ethernet Ethernet

Restarting an Animation C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 29/30 12/12/2011 SVG Slides, Printed Version Reaing an Animaion

ea = "ne e" Sa

ea = "henNoAci e" Sa

ea = "ala" Sa

Defal ale i ala

C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700//printed_slidessvg_f.xml 30/30