|
One of the best things about FusionMaps XT is the animated sequences that users get to relish. Using the Animation
Style Type, you can animate different objects of the map.
The live map shown below shows a very basic animation. In case you missed it you can reload the animation clicking on the button below saying - "Click here to animate the map above".
You can define custom animation styles and apply them to various
objects of the map. Each map object has a list of supported animation
properties that can be set through Animation
Style Type.
|
| Before we get to the parameters supported
by the animation style type, let's quickly glance through the properties
of map objects that we can animate using Animation
Style Type. The animation style type helps you with the animation
of following properties: |
|
| _x |
Helps
animate the x position of the given
map object |
| _y |
Helps
animate the y position of the given
map object. |
| _xScale |
Using
this property, you can animate the x-scale
(horizontal scale) of the given map object |
| _yScale |
Like
xScale, this animates the y-scale. |
| _alpha |
Helps
alpha transition (transparency fading)
animation effect |
|
|
| Note: In JavaScript maps, customized animation styles are not available. |
Not all parameters can be applied to all
map objects. For example, text fields cannot be x-scaled
or y-scaled. The list of animation
parameters for each map object is given in Overview page of this section. |
| Multiple animations in combination or multiple animations
in sequence can also be applied to any map object. For example, you
can opt to y-scale and alpha-fade
the plot or you might go for x-scale and y-scale. |
Let's now get to the attributes that
Animation Style Type exposes to help us control the functionalities: |
| param |
This attribute lets you specify the
property of map object which you want to animate e.g., _x,
_y, _xscale etc |
| start |
The start
value of animation e.g., if you're animating the map plot for fade
in alpha effect, the start value of alpha
will be 0 |
| Duration |
Using this, you can control the duration
of animation in seconds |
| Easing |
This attribute lets you specify the
pattern of animation easing. Valid values are
"elastic", "bounce", "regular", "strong" or "none". |
|
For the Animation Style Type,
except Easing, all the above attributes
are mandatory
Before getting to detailed explanations, let's quickly
cruise through a quick animation sample. Let's try and animate our plot (map drawing) so that it scales up after the map is loaded.
To do so, we first need to define our custom style. Since
scaling up involves increment of both
_xScale and _yScale, we'll now
need to define two animation styles and then apply them to Plot object.
The style definition goes as under: |
<styles>
<definition>
<style name='MyXAnim' type='animation' param='_xScale' start='0' duration='1' />
<style name='MyYAnim' type='animation' param='_yScale' start='0' duration='1' />
</definition>
... More XML Here ....
</styles> |
In the above code, we name the two styles as
MyXAnim and MyYAnim with
their param (animation parameter) as _xscale
and _yscale respectively. We set start
value as 0, we want the plot to scale up from 0 to 100 (remember that
scales are always from 0-100 in FusionMaps XT). We also specify the duration
as 1 for the animation sequence. |
| To apply this animation style to plot, the following code
is used: |
|
<styles>
... More XML Here ....
<application>
<apply toObject='Plot' styles='MyXAnim,MyYAnim' />
</application>
</styles> |
If you run the above code against any map, you'll see that the map scales up from 0 size to full size,
before the data is animated and rendered. Bingo! Exactly what we needed!
Let's move on to the attributes in details now. |
The param attribute
specifies the property of map object, which is to be animated. As earlier
discussed, it can take one of the following values, depending on the map
object:
- _x
- _y
- _xScale
- _yScale
- _alpha
- _rotation
We reiterate that not all map objects support all the
above properties. |
In our above example, where we were scaling the plot
from 0 to 100, we had set the start value of animation to 0, as we want
the plot to scale from 0 to 100. You always need to set a start value
for any animation style. The end value is decided by FusionMaps XT based
on the map object and animation parameter.
For example, if you want to animate the
x position of plot from 0
to their final position, you need to set
start position to 0. But since you do not know the end position of individual
map entity, it's automatically set by FusionMaps XT. |
Often, you might want to specify the start x and y
position for the animation as the start, center, or end position of
the canvas or map. FusionMaps XT introduces Macros
to bail you out of this trouble. Macros
are pre-defined variables which assume values at run time. For example,
$canvasStartY represents the start y
position of the canvas, and it assumes a value at run-time only.
So, if you need to animate the y position from canvas start Y to their final actual positions, all you need to do is:
|
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" /> |
|
FusionMaps XT, at run-time, will automatically calculate
and assign the value for this macro and
you will see the animation sequence starting from start Y
Position of canvas. So, now even if you resize the map or opt
to modify any map object, you never need to keep a tab
on the y position of canvas. FusionMaps
XT does that for you.
FusionMaps XT supports the following Macro
values for Animation Style Type: |
| $chartStartX |
Chart
Start X Position. It's 0 if you are loading the map in an
HTML page. However, if you are loading the map in another Flash
movie, it will take the given X position. |
| $chartStartY |
Chart
Start Y Position. It's 0 if you are loading the map in an
HTML page. However, if you are loading the map in another Flash
movie, it will take the given Y position. |
| $chartWidth |
Width
of the map. |
| $chartHeight |
Height
of the map. |
| $chartEndX |
End
X Position of the map. Same as
width of map if you are loading the map in an HTML page. |
| $chartEndY |
End
Y Position of the map. Same as height of map if you are
loading the map in an HTML page. |
| $chartCenterX |
Center
X Position of the map. |
| $chartCenterY |
Center
Y Position of the map. |
| $canvasStartX |
Canvas
Start X Position (from left), that is,
x co-ordinate of left side of the canvas. |
| $canvasStartY |
Canvas
Start Y Position (from top), that is, y
co-ordinate of the top of canvas. |
| $canvasWidth |
Width
of canvas. |
| $canvasHeight |
Height
of canvas. |
| $canvasEndX |
End
X Position of Canvas, that is, x
co-ordinate of right side of canvas. |
| $canvasEndY |
End
Y Position of Canvas, that is,
y co-ordinate of bottom of canvas. |
| $canvasCenterX |
Center
X Position of canvas. |
| $canvasCenterY |
Center
Y Position of canvas. |
|
Macro names are case-sensitive. As
such, you need to make sure that you are providing the macro
names in proper case, that is, $canvasstarty will not
work and it will log an error in debug window. You will need to correctly
specify it as $canvasStartY. |
| More Example using Macros: |
|
<style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" /> |
| |
You can also add numeric (integer) values to pre-defined macros to offset the animation when using macros. For example, if you wanted to animate the div lines from 10 pixels above canvas starting Y position, you could use: |
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY-10' param="_y" /> |
Or, if you wanted to animate from 10 pixels below the canvas start position, you could use: |
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY+10' param="_y" /> |
|
Currently, FusionMaps XT allows only + (addition) and - (subtraction) operation in Macro expressions. |
Easing refers to gradual
acceleration or deceleration during an animation. For example, a map
object might gradually increase its speed near the beginning of an animation,
but slow down right at the end of the animation before it arrives at a
full stop. There are many different equations for the acceleration and
deceleration, which change the easing animation accordingly. Easing helps
your animations appear more realistic.
FusionMaps XT supports the following easing methods: |
| Elastic |
Adds
an elastic effect that falls outside the transition range at one
or both ends. The amount of elasticity is unaffected by the duration. |
| Bounce |
Adds
a bouncing effect within the transition range at one or both ends.
The number of bounces relates to the duration—longer durations
produce more bounces. |
| Strong |
Adds
slower movement at one or both ends. This effect is similar to Regular
easing, but it's more pronounced. |
| Regular |
Adds
slower movement at one or both ends. This feature enables you to
add a speeding-up effect, a slowing-down effect, or both. |
| None |
Adds
an equal movement from start to end without effects, slowing, or
speeding up. This transition is also referred to as a linear transition. |
|
|
For any of the above easing method, FusionMaps XT provides
the easing effect at the end of the transition. For example, if you animate
the plots from 0 _yscale to 100
_yscale, you'll see that the plots animated very fast in the
start (they grow up very soon) but the animation at the end part is slow.
You can use any of the above easing methods for any animation
style that you define. |