2. SVG Animation
3. The set Element
4. Time Units
5. Regular Animations
6. Transform Animations
7. Animations along Pat...
8. Combining & Chai...
document.getElementById(someID) we can access elements by their
id attribute, which is what we’ve been using every time to assign names to elements.
Then, we can use the
setAttribute(name, newValue) attribute on that element to set an attribute’s value, and
getAttribute(name) to get the current value of a certain attribute.
var obj = document.getElementById("circly"); //Gets element with id "circly", which is a circle obj.setAttribute(r,50); //Changes the circle's radius to 50
CSS can do a lot for you in terms of animation, but its support for animations and transitions has to stop at some point, and that is when a few SVG-specific elements can step in. These are a bit more complex than simple CSS animations, but you get much more customizability in return. The four SVG animation elements are:
There’s one thing these all have in common: they need to be placed within the element they have an effect on. So, for example, if you want to animate a circle shape, you place one of these animation elements as a child element within the circle element.
The set Element
Let’s start simple. To set the value of an attribute after a certain amount of time – which I like to call delayed attribute assignment – use this:
<set attributeType=”XML” attributeName=”someAttribute” to=”newValue” begin=”time” />
The first argument is required for all animations of SVG attributes, because they are based on XML (as I briefly discussed at the start of the course).
This element changes someAttribute to newValue, and does so after waiting time amount of time.
<svg> <circle cx="40" cy="40" r="20"> <!-- Wait for 5 seconds to see this change! --> <set attributeType="XML" attributeName="r" to="40" begin="5s" /> </circle> </svg>
SVG knows four units for time:
We can extend this concept of changing attributes after a certain time, and instead gradually change an attribute over time. For this, the syntax is:
<animate attributeName=”attr” attributeType=”XML” from=”startVal” to=”targetVal” begin=”time” dur=”duration” repeatCount=”number”/>
This changes the attribute attr from startVal to targetVal, over the course of duration time. If you want, you can delay the start using the
begin attribute. The
repeatCount attribute determines how often the animation is repeated; a value of
indefinite keeps the animation looping forever.
attribute sets what to do when the animation is completed. The default value is
fill, which resets the shape. The other value is
freeze, which doesn’t do anything on completion.
<svg> <circle cx="40" cy="40" r="20"> <animate attributeType="XML" attributeName="cx" from="0" to="100" begin="0s" dur="10s" repeatCount="indefinite" /> </circle> </svg>
For some reason, to animate transforms we need another element. The syntax for this is:
<animateTransform attributeName=”transform” type=”transform” from=”startVals” to=”targetVals” begin=”time” dur=”duration” repeatCount=”number” />
The possible values for
type are what you expect from CSS transforms:
scale. Because these need multiple values as input, you can separate values by whitespace in the
<svg> <rect x="40" y="40" width="20" height="20"> <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 60 70" to="360 60 70" begin="0s" dur="5s" repeatCount="indefinite" /> </rect> </svg>
Animations along Paths
To create an animation along a path, you’ll need
<animateMotion begin=”time” dur=”duration” repeatCount=”number” >
<mpath xlink:href=”#thePath” />
Because these animations automatically influence the x and y position, you don’t need to set an attribute. They also automatically start at the beginning of the path, and finish at the end of the path.
Additionally, you can set an extra
attribute to automatically rotate the shape to be oriented in the same direction as its current position on the motion path. You can also set this attribute to a specific value, to set the shape to a fixed amount of degrees.
<svg> <path d="M20,40 L60,20 L120,80" id="somePath" stroke="green" fill="transparent"/> <rect x="0" y="0" width="20" height="20"> <animateMotion begin="0s" dur="5s" repeatCount="indefinite"> <mpath xlink:href="#somePath" /> </animateMotion> </rect> </svg>
Combining & Chaining Animations
To combine animations, which means executing them at the same time, you just need to include multiple animation elements within the same shape. With
<animateTransform> elements, however, multiple animations cancel each other out. To prevent this, add an
attribute to all of those elements.
To chain animations, however, we need to know when a certain animation stops. To do so, we first assign a name to an animation with the
id attribute (like we’re used to). Then, we use
name.begin to get the time a certain animation begins, or
name.end to get when the referenced animation ends. These just return values, which means we can also perform calculations with them to obtain the specific effect we want.
<svg> <rect x="0" y="0" width="30" height="15"> <animate id="one" attributeName="x" attributeType="XML" from="0" to="50" begin="0s" dur="3s" fill="freeze" /> <animate attributeName="y" attributeType="XML" from="0" to="50" begin="one.end" dur="3s" fill="freeze" /> </rect> </svg>