Fusionchart full entry manual 8

Animation style type

One of the best tasks fusioncharts does is the graphic animation sequence, which is quietly enjoyed by users. By default, fusioncharts uses animations only when drawing data (such as a bar chart, pie chart, or line chart. However, fusioncharts V3 does not limit your imagination.

With animation Styles, you can use animation effects for every object on the chart. You can customize an animation and apply it to various objects in the chart.

Each chart object has an animation supporting the attribute list, which can be set through the animation style. Before setting attributes through the call style, let's take a quick look at the animation style attributes.

Animation styles can help you achieve animation effects for the following attributes of an object:

Attribute	Description
_ X	Help animation of a given object at X position
_ Y	It helps to animation the given object at the Y position.
_ XScale	With this attribute, you can make X-Scaling (horizontal scaling) of the animation for a given chart object)
_ Yscale	Like _ XScale, in Y-Scaling (vertical scaling)
_ Alpha	Help implement transparency transition
_ Rotation	Helps you create circular motion animations for pie charts and circle charts

Not all parameters apply to all chart objects. For example, text fields cannot be X-scaled or Y-scaled, and the rotation effect is not applicable to them. Similarly, horizontal partition lines do not support scaling y and X. The parameter list for animation of each chart object is used in the respective chart areas of the Chart Specification.

Multiple animations can be applied to any chart object in combination with or in multiple animation sequences. For example, you can select y scaling and opacity gradient (composite animation) for the Data graph, or you may first zoom in X and then zoom in Y (continuous animation ).

Now let's take a look at the animation style attributes to help us control the functions:

Attribute	Description
Param	This attribute helps you specify the animation attributes of a chart object, for example,_ X, _ y, _ XScaleAnd so on
Start	The starting value of the animation. For example, if you want to make the transparency effect on the Data graph, the starting value is 0.
Duration	With this, you can control the animation time in seconds.
Easing	This attribute allows you to specify the category of an animation. Valid values: "ELASTIC" elasticity, "Bounce" rebound, "regular" regular, "strong" strong or "NONE" none.

All the above attributes except easing are mandatory for animation style types.

Before explaining it in detail, let's take a quick look at an animation example. Let's try to use the animated effect on the canvas after the chart is loaded.

Therefore, we need to first determine our custom styles. Because we need to add both _ XScale and _ yscale proportionally at the same time, we need to define two animated styles and apply them to the canvas objects. The style is defined as follows:

<Styles>
<Definition>
<Style name = 'myxscaleanim 'type = 'animation 'duration = '1' start = '0' Param = "_ XScale"/>
<Style name = 'myscaleanim 'type = 'animation 'duration = '1' start = '0' Param = "_ yscale"/>
</Definition>
... More XML here ....
</Styles>

AboveCodeThe two styles are named myxscaleanim and myyscaleanim, and their parameters (Animation Parameters) _ XScale and _ yscale. We set the starting value to 0, and the canvas size is increased to 100. (Remember that the scale of fusioncharts is always from 1 to 100). We also specify the animation sequence's duration to 1.

<Styles>
... More XML here ....
<Application>
<Apply toobject = 'canvas 'styles = 'myxscaleanim, myyscaleanim'/>
</Application>
</Styles>

If you run the code above for a single series of charts, you will see that the canvas size ranges from 0 to the full size before data animation and rendering. Exactly what we need! Let's go to the detailed attributes.

ParamAttribute

ParamAttributeSpecifies the chart object attributes of an animation. As discussed earlier, you can use one of the following values based on different chart objects:

• _ X
• _ Y
• _ XScale
• _ Yscale
• _ Alpha
• _ Rotation

We reiterate that not all chart objects support all of the above properties. See the given chart to obtain a list of Animation Parameters supported for each chart object.

Set the starting position of the animation object

In the above example, we implemented the canvas animation from 0 to 100. We set the animation start value to 0, because we want to scale the canvas from 0 to 100. You always need to set a starting value for any animation. The final value depends on the chart object and based on the Animation Parameters of fusioncharts.

For example, you want to implement y position animation for the partition line, from 0 to the final position (inside the canvas ). You need to set the starting position to 0. However, since you do not know the end position of the partition line, fusioncharts will automatically set it.

Similarly, if you want to create a partition line animation for a chart, it is 500 pixels high from the bottom to the final position of the chart. You must set the starting position to 500 and the ending position to fusioncharts.

Macro of the starting value

In general, you may want to specify the x/y position of the animation and the start/center/end position of the canvas. For example, if you want to apply the y attribute to specify the animation of the partition line from the layout to the end, you need to experiment with a lot of y values when you finally specify the Y value of the canvas. This is because the starting position of the canvas is calculated dynamically during running, and it depends on many factors, such as title, subtitle, chart gap, and blank space.

The introduction of fusioncharts V3 macros helps you get rid of such troubles. A macro is the hypothetical value of a predefined variable at runtime. For example, $ canvasstarty represents the position y at the beginning of the canvas, and it is assumed that there is only one value at runtime. Therefore, if you need the Y position of your partition line from the canvas to the final location, what you need to do is:/P>

<Style name = 'divyanim 'type = 'animation 'duration = '1' start =' $ canvasstarty 'Param = "_ y"/>

Fusioncharts is automatically calculated at runtime and a value is specified for the macro. You will see that the animation starts from position y at the beginning of the canvas. Therefore, if you reset the chart size, show/hide the title, or change the blank size, you do not need to keep the labels of the position y on the canvas.

Fusioncharts V3 supports the following animation style macro values:

$ Chartstartx	The X position at the beginning of the chart. If you load a chart on an HTML page, it is 0. However, if you load a chart in another flash video, the given X position will be taken
$ Chartstarty	The Y position at the beginning of the chart. If you load a chart on an HTML page, it is 0. However, if you load a chart in another flash video, the given X position will be taken.
$ Chartwidth	Chart width
$ Chartheight	Chart height
$ Chartendx	The X position of the chart end point. If you load a chart on an HTML page, its value is equivalent to the chart width.
$ Chartendy	Position y at the end of the chart. If you load a chart on an HTML page, its value is equivalent to the chart width.
$ Chartcenterx	X position in the middle of the chart
$ Chartcentery	Y position in the middle of the chart.
$ Canvasstartx	Canvas start X position (from the left) coordinate on the left of the picturesque canvas
$ Canvasstarty	Coordinates of the canvas startup y position (from the top)
$ Canvaswidth	Canvas width
$ Canvasheight	Canvas height
$ Canvasendx	Coordinates on the right of the canvas endpoint x
$ Canvasendy	Coordinate of the canvas end point y
$ Canvascenterx	X in the middle of the canvas
$ Canvascentery	Y position in the middle of the canvasYPosition of canvas

 

The macro name is case sensitive.. Therefore, make sure that the macro name you provide is in the correct case. $ canvasstarty will not work and will record errors in the debugging window. You must specify it as $ canvasstarty correctly.

Use macros For more examples:

<Style name = 'labelsanim 'type = 'animation 'duration = '1' start =' $ canvascenterx' Param = "_ x"/>
<Style name = 'yvaluesanim 'type = 'animation 'duration = '1' start =' $ canvascentery 'Param = "_ y"/>

Create a macro expression

You can also add a number (integer) value to a preset macro to offset the animation. For example, you can use ::

<Style name = 'vyanim 'type = 'animation 'duration = '1' start ='$ CanvasStartY-10'Param = "_ y"/>

Or, if you want to start from the animation position 10 pixels lower than the canvas, you can use:

<Style name = 'vyanim 'type = 'animation 'duration = '1' start ='$ Canvasstarty + 10'Param = "_ y"/>

Currently, fusioncharts only allows + (plus) and-(minus) operations in macro expressions.

Specify the animation category

EasingIt refers to the animation in the process of gradual acceleration or deceleration. For example, a chart object may increase its speed gradually at the beginning of the animation, but it will slow down before it reaches the end. There are also many different ways to accelerate and slow down. This helps your animation look more real.

Fusioncharts V3 supports the following methods:

Method	Description
Elastic	Add an elastic impact at one end of the range or both. This value is not affected by time.
Bounce	Add a bounce effect at one or both ends of the range. The value is related to duration. A larger duration value causes a rebound lasting longer.
Strong	Add slow motion at one or both ends. This effect is similar to routine easing, but it is more prominent
Regular	Add slow motion at one or both ends. This feature enables you to add the effects of accelerating them, slowing down, or both.
None	Increased a constant speed from the start to the end without affecting, slowing down or accelerating. This transformation is also called linear transition.

For any of the above methods, fusioncharts will provide a buffer impact at the end of the transition period. For example, if the animation is scaled from 0 to 100 on the Y axis, you will see that the column animation starts very fast (fast growth), but the animation speed in the last part is very slow.

You can use any of the above methods to define animation styles.