12/12/2011 SVG Slides, Printed Version SVG Animation SVG Animation: Introduction What, How, When What is animated? Common Attributes Animation Functions Relationship to SMIL Animation Styles Animating Properties/Attributes Animating d Attribute Animating stroke-dashoffset and Text Offset animateTransform Element Additive Animations Pseudo 3D Transformed Paths Animate Symbols Animated Fridge Control setElement Changing Visibility Changing Visibility animateColor Element animateMotion Element Animate along Path Animate Motion Example Other Motion Paths Animating Font Size, Offset and Text Path How How is Animation Performed? Types How Attributes values Attribute values Example values Examples Animating Text Example Animating Clip Path Animating Pattern keyTimes Example keyTimes calcMode Key Spline Interpolation Example Key Spline Interpolation Ball Bouncing Linear v Spline Flash Walk in SVG SVG Discrete Walk SVG Key Values Walk SVG Key Splines Walk SWF v SVG Handcrafting Animating many Circles When When is Animation Performed? Timing Attributes Synchronisation Events Animation onclick and set Chaining Animations Chaining: IP Network Restarting an Animation 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 dynamically Animation is controlled through a set of animation elements Reusing parts of W3C's SMIL2.0 Specification (Synchronized Multimedia Integration Language Version 2.0) Declarative syntax, no real increase in file size Animation is performed on client side Aspects to describe: What can be animated? How does animation take place? When does animation occur? What, How, When What How Attributes From To Range Properties Discrete Points Clipping Value Ranges Patterns Paced Viewbox Splines When Begin time At event 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? Practically all attributes and properties can be changed XML: coordinates, path expression, filter characteristics, ... CSS: colour, visibility, opacity, ... Animation elements animate: animates most attributes and properties animateMotion: animates motion along a path animateColor: animates between colour values animateTransform: controls transformation (rotate, translate, etc) set: changes discrete values (eg, display) Examples: <circle id="c1" r="50" style="fill:red"> <animate attributeType="XML" attributeName="r" from="30" to="50" ...> </circle> <circle id="c1" r="50" style="fill:blue; opacity:1"> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" ...> </circle> Common Attributes Animation elements share some common attributes: What is animated <animate attributeType = "XML" Attributes:XML, Properties:CSS, attributeName = "width" The attribute to be animated xlink:href = "#toanim" Pointer to element to be animated (default is parent) How it is animated from = "100" Starting value for the animation to = "200" Value when animation complete fill = "freeze" What happens when animation is complete (freeze or remove) When it is animated id = "anim1" Unique id for chaining animations begin = "2s" When animations starts dur = "3s" How long it lasts /> C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/…/printed_slidessvg_f.xml 3/30 12/12/2011 SVG Slides, Printed Version Animation Functions <animate . attributeName="width" . from="100" to="200" . /> <animateColor . from="COLVAL1" to="COLVAL2" . /> <set . to="VALUE" . /> <animateTransform . .attributeName="transform" type="scale" . /> <animateMotion . path="M 0, 100 L 50, . ." rotate="value" . /> 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: mainly shorthands Relationship to SMIL Shared with 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 Only Functions: animateTransform modifies a transformation attribute over time mpath animateMotion can have an mpath child element as a motion path Extensions to SMIL functions: path attribute allows all SVG path data to be used in the path attribute of animateMotion keyPoints attribute to animateMotion to provide precise control of the velocity 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 Styles Animation by reference <defs> <animate xlink:href="#circ" attributeName="r" from="50" to="20" begin="0s" dur="4s" fill="freeze"/> </defs> <circle id="circ" cx="600" cy="250" r="50" /> Animation as part of the element (xlink:href is to parent) <rect x="10" y="50" width="150" height="75" > <animate attributeName="width" from="150" to="90" begin="0s" dur="10s" fill="freeze"/> <animate attributeName="height" values="75;150" begin="4s" dur="8s" fill="freeze"/> </rect> fill attribute: freeze retains image, remove removes it) from, to: gives start and end values for the attribute or property values: gives, in this example, the start and end values for the attribute or property Animating Properties/Attributes <circle cx="60" cy="60" r="50" style="fill:green;opacity:1;stroke:none"> <animate attributeType="CSS" attributeName="opacity" values="1;0;1" begin="0s" dur="12s" fill="freeze"/> <animate attributeType="XML" attributeName="cx" values="60;200;60" begin="0s" dur="12s" fill="freeze"/> <animate attributeType="XML" attributeName="cy" values="60;100;60" begin="3s" dur="6s" fill="freeze"/> <animate attributeType="XML" attributeName="r" values="50;30;50" begin="4s" dur="8s" fill="freeze"/> </circle> Main Points: Any number of animations can take place together Start and stop times can vary Time starts when program is loaded If no fill parameter, reverts back to orignal value Don't mix CSS and XML animations on same property C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/…/printed_slidessvg_f.xml 5/30 12/12/2011 SVG Slides, Printed Version Animating d Attribute <path d="..."> <animate attributeName="d" from="M20 100 c ..." to="M80 100 c ..." dur="3s" /> </path> Main point: The two d's must match in structure, same number of subpaths, curves animating to curves, lines to lines, both closed or both open Animating stroke-dashoffset and Text Offset <path id="france" style="stroke-dasharray: 26405 26405;stroke-dashoffset:26405" d="M-1748 4854c208,-29 217,-721 281,-694 ... <animate attributeName="stroke-dashoffset" from="26405" to="0" dur="10s" /> <set attributeType="CSS" attributeName="fill" to="blue" begin="12s" /> </path> <animate attributeName="startOffset" from="0%" to="99%" begin="0s" dur="6s" /> g h lei s S , g an o t do 's es a nd w ta u 's s a n p le p n a a ig u S n h d s down , goe C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/…/printed_slidessvg_f.xml 6/30 12/12/2011 SVG Slides, Printed Version animateTransform Element <circle . <animateTransform attributeName="transform" type="rotate" from="0" to="7200" dur="20s" /> <animateTransform attributeName="transform" type="scale" values="1,1;3,0.3;1,1" additive="sum" dur="20s"/> </circle> Main points: type attribute specifies type of transformation additive="sum" ensures two animations on same attribute both take place Alternatively nest <g> elements and apply one transformation to each animateTransform cannot be replaced by the animate element Additive Animations <circle cx="100" cy="160" r="30" style="fill:green;stroke:none"> <animate attributeName="cx" from="0" to="100" begin="1s" dur="1s" additive="sum" fill="freeze" /> <animate attributeName="cx" from="0" to="300" begin="2.5s" dur="2s" additive="sum" fill="freeze" /> </circle> <circle cx="100" cy="340" r="30" style="fill:red;stroke:none"> <animate attributeName="cx" from="0" to="100" begin="5s" dur="1s" additive="sum" accumulate="sum" repeatCount="5" fill="freeze" /> </circle> 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 Pseudo 3D <g transform="skewX(10)"> <g transform="skewY(40)"> <text style="font-size:40px;fill:green"> <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.5s" repeatCount="indefinite"/> Hopgood</text> </g> <g> H op go od Transformed Paths Rolling motion on a curve is not complicated as long as curve defined by arcs Find the equidistant curve (dash-dotted) Determine the length of the equidistant path A non-trivial task for paths with Bezier segments Attach a rotational animateTransform element to the rolling element The angle is given by: drot = 180*len/(r*pi) [in degrees] Then attach an <animateMotion> element along the equidistant path. <circle r="r" .. <animateTransform type="rotate" values="0;drot" dur="t" .. /> <animateMotion path="equidistant" dur="t" .. /> </circle> Animated Planetary Drive, linear transmission behaviour Planet gears' motion defined by two overlaid rotate transforms http://www.mecxpert.de/ C:/Jigsaw/Jigsaw/WWW/msc_2011-12/p00700/…/printed_slidessvg_f.xml 8/30 12/12/2011 SVG Slides, Printed Version Animate Symbols <defs> <polygon id="star" style="fill:white;" points="0,-14