svg Animating basics

12.1 Animating Basics

Up to this point, all the images you have seen are static images; once constructed, they never change. In this chapter, we will examine two of three methods of making graphic images move.

The first method, SMIL-based animation, should be used for movement that is a fundamental part of what the graphic represents, and for which the motion can be defined ahead of time.
CSS animations should be used for stylistic effects and simple feedback (like highlighting an element on focus/hover).
Scripting should be used for more complex interaction, and it is covered in Chapter 13.

SMILL and CSS method

The animation features of SVG are based on the World Wide Web Consortium's Synchronized Multimedia Integration Language Level 3 (SMIL3) specification.
In this system, you specify the starting and ending values of the attribute, color, motion, or transformation you wish to animate; the time at which the animation should begin; and the duration of the animation.

Example 1. Shrinking rectangle

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000">
      <rect x="10" y="10" width="180" height="180" stroke="black" fill="orange">
        <animate
          attributeName="width"
          attibuteType="XML"
          from="180" to="10"
          begin="0s" dur="5s"
          fill="freeze"/>
      </rect>
    </svg>

Description

The first thing to notice is that the <rect> element is no longer an empty element; the animation is contained within the element.

The <animate> element specifies the following:

The attributeName whose value should change over time; in this case, width.
The attributeType. The width attribute is an XML attribute.
The other common value of attributeType is CSS, indicating that the property you want to change is a CSS property.
If you omit this specification, the default value of auto is used; it searches through CSS properties first and then XML attributes.
The starting (from) and ending (to) values for the attribute.
- In this example, the starting value is 200, and the ending value is 20.
- from value is optional;
  if you leave it out, the starting value is whatever was specified in the parent element.
- There is also a by attribute, which you may use instead of to;
  it is an offset added to the starting from value; the result is the ending value.
The beginning and duration times for the animation.
In this example, time is measured in seconds, specified by the s after the number.
Other ways to define time are described in the next section, “How Time Is Measured”.
What to do when the animation finishes. In this example, after the 5-second dura- tion, the attribute will “freeze” at the to value. This is the SMIL fill attribute, which tells the animation engine how to fill up the remaining time. Don't confuse it with SVG's fill attribute, which tells SVG how to paint an object. If you remove this line, the default value (remove) will return the width attribute to its original value of 200 after the 5-second animation has finished.

Example 2. Multiple animations on a single object

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000">
      <rect x="10" y="10" width="20" height="20" style="stroke:black; fill:green; fill-opacity:0.25">
        <animate attributeName="width" attibuteType="XML" from="20" to="180" begin="0s" dur="8s" fill="freeze"/>
        <animate attributeName="height" attibuteType="XML" from="20" to="150" begin="0s" dur="8s" fill="freeze"/>
        <animate attributeName="fill-opacity" attibuteType="CSS" from="0.3" to="1" begin="0s" dur="3s" fill="freeze"/>
        <animate attributeName="fill-opacity" attibuteType="CSS" from="1" to="0.3" begin="0s" dur="3s" fill="freeze"/>
      </rect>
    </svg>

Example 3. Simple animations of multiple objects

 <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000">
  <rect x="10" y="10" width="20" height="20" style="stroke:black; fill:#cfc;">
    <animate attributeName="width" attibuteType="XML" from="20" to="120" begin="0s" dur="8s" fill="freeze"/>
    <animate attributeName="height" attibuteType="XML" from="20" to="150" begin="0s" dur="8s" fill="freeze"/>
  </rect>
  <circle cx="70" cy="70" r="20" style="stroke:black; fill:#ccf;">
    <animate attributename="r" attibuteType="XML" begin="2s" dur="4s" from="20" to="50" fill="freeze"/>
  </circle>
</svg>