FusionChart完全入门手册8
动画样式类型
FusionCharts做得最好的事情之一就是图表动画序列，这是用户静静乐道的。默认情况下，FusionCharts仅在数据绘制（柱状图、饼图、折线图等）时候使用动画。但是FusionCharts V3不限制你的想象力。
使用动画样式,你可以为图表上的每一个对象使用动画效果。您可以自定义动画并将它应用到图表的各种对象。
每个图表对象有一个动画支持属性列表，可以通过动画样式设置。在我们通过通话样式设置属性之前，让我们快速看一下动画样式属性。
动画样式可以帮助你为对象的下列属性实现动画效果:
|
属性 |
描述 |
|
_x |
帮助给定对象在x位置进行动画效果 |
|
_y |
帮助给定对象在y位置进行动画效果. |
|
_xScale |
使用此属性，您可以为给定的图表对象制作动画的X-缩放（水平缩放） |
|
_yScale |
像_xScale，在Y-缩放（垂直缩放） |
|
_alpha |
帮助实施透明度过渡效果 |
|
_rotation |
帮助你为饼图和圆环图制作圆周运动的动画 |
并非所有的参数都可以适用于所有图表对象。例如，文本字段不能是X -缩放或Y缩放，旋转效果也不适用于他们。同样，水平分区线不支持的y和x缩放移。为每个图表对象动画的参数名单在图表规范各自的图表区域工作.
结合或多个动画序列多个动画也可以应用到任何图表对象。例如，你可以为数据图选择y缩放和透明度渐变（组合动画）或者您可能会首先X缩放，再y缩放（连续动画）。
现在让我们看看动画样式属性，以便帮助我们控制功能:
|
属性 |
描述 |
|
param |
这个属性帮助你指定图表对象动画的属性例如, _x, _y, _xscale 等 |
|
start |
动画的开始值。比如如果你要对数据图进行透明度效果，这个开始值是0。 |
|
Duration |
利用这一点，你可以以秒级控制动画时间 |
|
Easing |
这个属性允许你指定动画进行的类别。有效值是 "elastic"弹性, "bounce"反弹, "regular"定期, "strong"强 or "none"无. |
对于动画风格类型，除了 Easing，所有上述属性是强制性的
在详细解释前，让我们快速看看一个动画示例。让我们在图表加载完成后尝试让画布使用动画效果
为此，我们首先需要确定我们的自定义样式，由于需要同时_xScale和 _yScale同时按比例增加，我们需要定义两个动画样式，把他们应用到画布对象。样式定义如下：
<styles>
<definition>
<style name='MyXScaleAnim' type='ANIMATION' duration='1' start='0' param="_xscale" />
<style name='MyYScaleAnim' type='ANIMATION' duration='1' start='0' param="_yscale" />
</definition>
... More XML Here ....
</styles>
在上面的代码中，我们命名了两个样式分别为 MyXScaleAnim和MyYScaleAnim和他们的参数（动画参数） _xscale和 _yscale。我们设置起始值为0，画布规模增加到100。（记住FusionCharts的规模总是从1-100），我们还指定了动画序列的 duration为1。
<styles>
... More XML Here ....
<application>
<apply toObject='Canvas' styles='MyXScaleAnim,MyYScaleAnim' />
</application>
</styles>
如果您为一个单一系列图表运行上面的代码，你会看到，在数据动画和渲染之前，画布规模从0到全尺寸的大小。正是我们需要的！让我们进入到详细的属性.
param 属性param 属性 指定应用动画的图表对象属性。正如前面讨论的，根据图表对象不同可以采用以下值之一：
- _x
- _y
- _xScale
- _yScale
- _alpha
- _rotation
我们重申，不是所有图表对象都支持所有的上述性质。请参考给定的图表，以获取为每个图表对象支持动画参数列表。
设置动画的对象的起始位置在上面的例子中，我们实现了画布从0到100的动画，我们设置动画起始值为0，因为我们想画布从0到100缩放。你总是需要为任何动画设置一个起始值。最终值取决于图表对象并根据FusionCharts的动画参数。
例如，你想为分区线实现y位置动画，从0到最终位置（画布内）。你需要设置起始位置为0。但既然你不知道分区线的终点位置，FusionCharts会自动设置的。
同样，如果你想为一个图表实现分区线动画效果，它从底到各自的最终位置高 500像素。你需要设置起始位置为500，终点位置由FusionCharts设置。
起始值的宏通常情况下，你可能想指定动画的x/y位置，画布的开始/中间/结束位置。例如你想应用y属性指定分区线从画布头到终点的动画，在你最终指定画布的y值钱你需要试验很多y值。这是因为画布的起始位置是在运行时时动态计算的，它依赖于很多因素，如标题、子标题、图表间隙、空白等
FusionCharts v3的引入宏帮你摆脱这种麻烦。宏是预先定义的变量在运行时的假设值。例如，$ canvasStartY代表了画布开始Y位置，并假定在运行时只有一个值。所以，如果你需要你的分区线的Y位置从画布开始到最终的实际位置上，你需要做的是：/p>
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" />
FusionCharts在运行时将自动计算,并且为宏指定值，你会看到动画从画布的开始Y位置开始。因此，如果就算你重设图表大小或者显示/隐藏标题或者改变空白大小，你也不需要保留画布y位置的标签，FusionCharts为你做.
FusionCharts v3 支持下列的动画样式宏值:
|
$chartStartX |
图表开始的x位置。如果你在一个HTML页面加载图表它是0。不过，如果你在另一个Flash影片载入图表，将采取给定的X位置 |
|
$chartStartY |
图表开始的y位置。如果你在一个HTML页面加载图表它是0。不过，如果你在另一个Flash影片载入图表，将采取给定的X位置. |
|
$chartWidth |
图表宽度 |
|
$chartHeight |
图表高度 |
|
$chartEndX |
图表终点X位置。如果你在一个HTML页面加载图表，它的值等同于图表的宽度。 |
|
$chartEndY |
图表终点Y位置。如果你在一个HTML页面加载图表，它的值等同于图表的宽度。 |
|
$chartCenterX |
图表中间X位置 |
|
$chartCenterY |
图表中间Y位置. |
|
$canvasStartX |
画布启动X位置（从左侧）如画布左边的坐标 |
|
$canvasStartY |
画布启动Y位置（从上部）如画布头的坐标 |
|
$canvasWidth |
画布宽 |
|
$canvasHeight |
画布高 |
|
$canvasEndX |
画布终点X位置如画布右侧的坐标 |
|
$canvasEndY |
画布终点Y位置如画布底的坐标 |
|
$canvasCenterX |
画布中间X位置 |
|
$canvasCenterY |
画布中间Y位置 Y Position of canvas |
宏名称是大小写敏感的。因此，你需要确保你提供宏的名字以正确大小写，$ canvasstarty将不工作，并且将记录在调试窗口中的错误。您需要正确地指定为$ canvasStartY。
使用宏更多例子:
<style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" />
你也可以加入数字（整数）值预先定义的宏，以抵消动画时使用宏。例如，如果你想画布div线Y位置的从10像素开始动画，你可以使用：:
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY-10' param="_y" />
或者，如果你想从动画开始位置比画布低10像素，你可以使用：
<style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY+10' param="_y" />
目前，FusionCharts的只允许+（加）和 - （减）在宏表达式操作。
指定动画类别Easing 是指逐渐加速或减速过程中的动画。例如，一个图表对象可能在动画开始逐步增加它的速度，但是在到达结束前会放慢速度。还有很多不同的方式来进行加速和减速。这有助于你的动画看起来更真实。
FusionCharts v3支持以下方法：
|
方法 |
描述 |
|
Elastic |
增加一个弹性影响，在范围的一端或两者。该值不受时间影响。 |
|
Bounce |
增加一个反弹效应在范围的一端或两端。数值与duration相关，更大的duration值产生反弹持续时间更长。 |
|
Strong |
添加较慢的运动在一端或两端。这种效果是类似的例行缓和，但它更突出 |
|
Regular |
添加较慢的运动在一端或两端。此功能使您能够添加加速他们的影响，放缓的影响，或两者兼而有之。 |
|
None |
增加了一个匀速运动从开始到结束没有影响，减缓或加速。这一转变也称为线性过渡。 |
对于上述任何方法，FusionCharts在过渡期结尾会提供缓冲影响。例如，如果的动画是y轴缩放从0到100，你会看到，列的动画在开始很快（增速很快），但在最后一部分的动画速度很慢.
你可以使用上述任何方法进行动画样式定义
