|
Animation Lesson
by Paul Hounshell of the Wood Elves
Animation in SVG is a big topic. Unfortunately it's also a confusing topic.
So many things can (or at least should) be animatable, but most of this
functionality gets lost simply because it is difficult to set up and get
working properly.
Animation can be broken down into two tags, which are placed as children of
nearly any other tag. They both do fundamentally similar things, but they
work on different premises.
The first tag is "animateTransform." The purpose of this tag is to....well...
it's to animate transforms (bet you didn't expect that). Let me explain it a
bit better.
I'm sure you know what the transforms are. Scale, Rotate, Translate, etc.
These are very important things to be able to manipulate. Instead of having
to do this via very complicated Javascript or even worse methods, this tag
does the hard work for you. The most common attributes of this tag are:
attributeName
type
dur
values
repeatCount
fill
begin
end
"attributeName" specifies the actual attribute you are modifying. This is
almost always "transform" I honestly can't think of a realistic case
where it wouldn't be.
"type" specifies the actual transformation you want to modify. If you want
to turn something, it's "rotate", for moving it's "translate", and so on.
"dur" specifies how long this action is supposed to take. If you want
something to do something for one minute, you'd use a dur of "60s" or "1m"
A valid duration is a real number (x[.y]) followed by a unit of time.
"values" specifies the range of values you intend for this to take. Keep in
mind that these values are linear. The object will pass every point between
the two values only once and in succession (well, in theory at least). This
can be further extended by tacking extra values on the back. For instance,
the values "0;360;0" will turn something around once, then turn it back. The
values "0;360;0;180;0" will turn something around, turn it back, turn it
halfway, then turn it back again.
"repeatCount" unsurprisingly specifies the number of times this action should
happen. Once you've reached the end of the cycle, if there are any remaining
repetitions, the animation will start over again. A repeat count of
"indefinite" specifies that the animation should run until the page is unloaded.
This behavior can be circumvented with the "end" tag though.
"fill" specifies what to do once the animation has finished. If "fill" is set
to "freeze" the object will remain where it is once the animation ends. Note
that this is an irrelevant attribute if repeatCount is "indefinite".
"begin" is used to specify when that action should occur. Once again, you can
use a timecode as specified in "dur" Additionally you can use events, though
this topic is tricky and reserved for another tutorial.
"end" is typically used when specifying exactly when an animation should stop.
It is not redundant though. An animation can repeat over its' duration
several times, but it would stop when the "end" timecode is reached, even if
mid-way through a cycle. This tag also can use events as in the begin tag.
The other animation tag available is "animate" It's used to animate everything
except for transforms.
This tag uses all of the same attributes as the animateTransform tag. However
there is one minor difference. The attributeName tag actually matters. It is
used to specify which attribute of the parent tag is being animated. All others
are identical though.
In general, the animation support in the SVG plugin is commendable. Any attribute
of any tag can be animated in the exact same way with only one exception: It is
not allowed to animate an animation tag. I personally think it would be cool for
things like animating a ball whose bounce gets smaller and smaller, but it does
not exist.
The final thing to note is the difference between SVG animations and Flash
animations. Flash animations are all cell based with a default number of
intervals per second being 15. However, if the computer can not keep up, the time
is slowed down. This means that audio in conjunction with the animation will
either be off or disjointed. Furthermore, you can not be guaranteed that an
animation will run in a specific amount of time. On your dual 800MHz, half gig of
ram machine, your full screen, highly detailed flash splash page may look fine,
but on someone elses 133 MHz 16 Mb RAM machine, it would take half an hour to get
to the next page of your site.
By comparison, all of Adobe's SVG animation is time based instead of frame based.
This means that every user will finish the animation in the exact same amount of
time. If their machine can't keep up, frames are dropped to keep the overall speed
guaranteed.
Next time I'll discuss a few of the more advanced animation features such as event
offset timecodes, splines and anything else I can think of.
|
