Styles > Animation Style Type |
||||||||||||||
One of the best things about FusionWidgets v3 is the animated charting sequences that users get to relish. By default, FusionCharts animates only the data plot (columns, bars, lines etc.), however v3 does not limit your imagination just there. Using the Animation Style Type, you can virtually animate each and every object on the chart. You can define custom animation styles and apply them to various objects of the chart. Each chart 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 chart objects that we can animate using Animation Style Type. The animation style type helps you with the animation of following properties: |
||||||||||||||
|
||||||||||||||
Not all parameters can be applied to all chart objects. For example, text fields cannot be x-scaled or y-scaled nor does the rotation effect apply to them. The list of animation parameters for each chart object is given in the XML Sheet of the respective chart. Multiple animations in combination or multiple animations in sequence can also be applied to any chart object. For example, you can opt to y-scale and alpha-fade the data plot (combination animation) or you might go for x-scale first and then y-scale (sequential animation). |
||||||||||||||
Let's now get to the attributes that Animation Style Type exposes to help us control the functionalities: |
||||||||||||||
|
||||||||||||||
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 canvas so that it scales up after the chart is loaded. To do so, we first need to define our custom style. Since scaling up involves sequential increment of both _xScale and _yScale, we'll now need to define two animation styles and then apply them to Canvas object. The style definition goes as under: |
||||||||||||||
<styles> |
||||||||||||||
In the above code, we name the two styles as MyXScaleAnim and MyYScaleAnim with their param (animation parameter) as _xscale and _yscale respectively. We set start value as 0, we want the canvas to scale up from 0 to 100 (remember that scales are always from 0-100 in FusionCharts). We also specify the duration as 1 for the animation sequence. To apply this animation style to canvas, the following code is used: |
||||||||||||||
<styles> |
||||||||||||||
If you run the above code against a data-streaming chart, you'll see that the canvas 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 chart object, which is to be animated. As earlier discussed, it can take one of the following values, depending on the chart object:
We reiterate that not all chart objects support all the above properties. Please refer to the XML Sheet for the given chart to get the list of supported animation parameters for each chart object. |
||||||||||||||
Setting the start position of animation object |
||||||||||||||
In our above example, where we were scaling the canvas from 0 to 100, we had set the start value of animation to 0, as we want the canvas to scale from 0 to 100. You always need to set a start value for any animation style. The end value is decided by FusionCharts based on the chart object and animation parameter. For example, if you want to animate the y position of div lines from 0 to their final position (which is within the canvas), you need to set start position to 0. But since you do not know the end position of individual div line, it's automatically set by FusionCharts. Similarly, if you want to animate the div lines Y position for a chart, whose height is 500 pixels, from bottom to the respective final position, you'll need to set start position as 500. The end position again will be decided by FusionCharts. |
||||||||||||||
Specifying the easing for animation |
||||||||||||||
Easing refers to gradual acceleration or deceleration during an animation. For example, a chart 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. |
||||||||||||||
FusionCharts v3 supports the following easing methods: |
||||||||||||||
|
||||||||||||||
For any of the above easing method, FusionCharts provides the easing effect at the end of the transition. For example, if you animate the columns from 0 _yscale to 100 _yscale, you'll see that the columns 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. |