Animation Style Type Parameters

Using the Animation Style Type, you can animate different objects of the map. 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:

Property

Description

_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
 

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:

Attribute

Description

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 would 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). 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.
 
param attribute

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.

 
Setting the start position of animation object

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 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.