Workshop : SVG and Animation (SMIL, script based)

Organizers: Stefan Goessner,  Michel Hirtzler

Bouncing ball  

- use 'animate' on 'cy' in circle or 'animateMotion' for same effect
- control time with 'keyTimes' and 'keySplines'

1) Ball go top to bottom and back to top with 'animate' element on 'cy' of circle element

Example -

2) Controlling time with keyTimes and keySplines

You can use tools about keyTimes and keySplines to test values

Example -

3) Use animateMotion along a path

Example  -

4) Ball bouncing on 4 vertices of a square 

Example -