Animation in SVG is the changing of attributes of objects over time. In the last lesson, we covered activating immeadiate effects with the mouse. With animation, we make events happen over a period of time.
Before we really begin, there are several tags that control animation in
Now we can move onto setting up an actual animation tag.
Let's start off with a simple, red, circle shape.
Now we add some fun, or specifically, an animation tag.
<animate attributeName="cx" from="250" to="750" begin="0s" dur="5s" repeatCount="indefinite" />
This tag goes inside the circle tag, at the end of it. And the result:
As you can see, the center point of the circle,
cx, is moving
to the right.
cx is identified in the
<animate> tag. The following
to define where the variable starts and ends, and the
dur define the interval of time for the
animation in seconds. The
repeatCount can be set to a specific
number, or to "indefinite" which means the animation will go on forever. It is
in this way that you can animate with all basic circle variables. You can also
use multiple animations at the same time, and link the beginning of the
animations to the mouse events you learned in the last lesson. See if you can
figure out where the
mouseover event trigger was placed in the
Animating on object on a path is extremely easy. Using the
<animateMotion> tag, define the path as you learned several lessons ago. Then specify the duration, and set
<rect x="0" y="0" width="25" height="25" fill="blue"> <animateMotion path="m 150,150 c 20,70 -70,20 -100,-100" dur="10s" rotate="auto" repeatCount="indefinite"/></rect>
Notice how the rectangle rotates in the direction it is moving? Try deleting the rotation definition from the code. Does the rectangle still rotate? Here are some of the possible definitions for
Okay, you've now got the basics of
SVG animation. Together with all of the past lessons, you should have a decent understanding of
SVG by now. The following tutorials will be about the applications of