To animate complex units, use the
animUnit() function in gridSVG. Documentation on
animUnit() is available in a draft article.
grid.animate() provides a user the ability to perform animation
on graphics objects. This is accomplished using SMIL animation and SVG’s
<animate /> element. While it is the case that all properties of graphics
objects can be animated, if support is available on a property of a graphics
object, we can smoothly animate that object’s property over time.
The usage of the
grid.animate() function is defined as follows (see
?grid.animate for more complete documentation):
The key named arguments to this function are
path is the grid path of the graphics object you wish to animate,
usually this is the same as the name of that graphics object.
to the length of the animation (in seconds), if left unspecified the animation
is assumed to last only 1 second. Animations can be repeated by setting
TRUE, by default the value of this parameter is
parameter determines the behaviour of the graphics object if and when the
animation ends. If
revert is set to
TRUE, the animation reverts back to the
first value of the animation, otherwise (and by default) the animation finishes
on its final value.
begin is a delay that refers to how many seconds that the
animation should wait before starting. Finally,
interpolate described whether
animation transitions should occur smoothly (i.e. linearly) or immediately. The
interpolate can take one of two values,
The most important argument to the
grid.animate() function is
..., which is
any property that you intend to animate and the values that are going to be
animated through. The animation values are taken in the form of an
A simple example to use in place of
... might be something like
x = animUnit(unit(1:5 / 10, "npc")).
This will smoothly animate a given graphics object along the
x axis through
units of 0.1, 0.2, …, 0.5. A more complete example is shown below:
We are demonstrating how to animate on two graphical elements that are created
from a single graphics object. In this case, we wish to animate the rectangle
GRID.rect.1, but only moving the second rectangle, leaving the
first rectangle in the same position.
The way in which we approach this is by creating a matrix of values to animate
through, we do this by using the
animUnit() function. We give
sequence of units to use, then tell it which time period and which sub-grob it
applies to. In our case, we are ensuring that the first rectangle (which has an
id of 1), stays at a
y value of 0.4 for 3 time periods. The other
id is 2, is going to be animated from 0.4, to 0.7, and back
to 0.4 again.
yunits ready for use, we can apply it to
grid.animate() call above.
Now that this animation information has been added to
gridSVG can write to SVG, applying the animation information associated with
GRID.rect.1. The resulting image is shown below.