FusionChart完全入门手册8
2010-09-03 14:24
288 查看
动画样式类型
使用动画样式,你可以为图表上的每一个对象使用动画效果。您可以自定义动画并将它应用到图表的各种对象。
每个图表对象有一个动画支持属性列表,可以通过动画样式设置。在我们通过通话样式设置属性之前,让我们快速看一下动画样式属性。
动画样式可以帮助你为对象的下列属性实现动画效果:
属性 | 描述 |
_x | 帮助给定对象在x位置进行动画效果 |
_y | 帮助给定对象在y位置进行动画效果. |
_xScale | 使用此属性,您可以为给定的图表对象制作动画的X-缩放(水平缩放) |
_yScale | 像_xScale,在Y-缩放(垂直缩放) |
_alpha | 帮助实施透明度过渡效果 |
_rotation | 帮助你为饼图和圆环图制作圆周运动的动画 |
结合或多个动画序列多个动画也可以应用到任何图表对象。例如,你可以为数据图选择y缩放和透明度渐变(组合动画)或者您可能会首先X缩放,再y缩放(连续动画)。
现在让我们看看动画样式属性,以便帮助我们控制功能:
属性 | 描述 |
param | 这个属性帮助你指定图表对象动画的属性例如, _x, _y, _xscale 等 |
start | 动画的开始值。比如如果你要对数据图进行透明度效果,这个开始值是0。 |
Duration | 利用这一点,你可以以秒级控制动画时间 |
Easing | 这个属性允许你指定动画进行的类别。有效值是 "elastic"弹性, "bounce"反弹, "regular"定期, "strong"强 or "none"无. |
在详细解释前,让我们快速看看一个动画示例。让我们在图表加载完成后尝试让画布使用动画效果
为此,我们首先需要确定我们的自定义样式,由于需要同时_xScale和 _yScale同时按比例增加,我们需要定义两个动画样式,把他们应用到画布对象。样式定义如下:
<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>
... More XML Here ....
<application>
<apply toObject='Canvas' styles='MyXScaleAnim,MyYScaleAnim' />
</application>
</styles>
_x
_y
_xScale
_yScale
_alpha
_rotation
我们重申,不是所有图表对象都支持所有的上述性质。请参考给定的图表,以获取为每个图表对象支持动画参数列表。
例如,你想为分区线实现y位置动画,从0到最终位置(画布内)。你需要设置起始位置为0。但既然你不知道分区线的终点位置,FusionCharts会自动设置的。
同样,如果你想为一个图表实现分区线动画效果,它从底到各自的最终位置高 500像素。你需要设置起始位置为500,终点位置由FusionCharts设置。
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 |
<style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" />
<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的只允许+(加)和 - (减)在宏表达式操作。
方法 | 描述 |
Elastic | 增加一个弹性影响,在范围的一端或两者。该值不受时间影响。 |
Bounce | 增加一个反弹效应在范围的一端或两端。数值与duration相关,更大的duration值产生反弹持续时间更长。 |
Strong | 添加较慢的运动在一端或两端。这种效果是类似的例行缓和,但它更突出 |
Regular | 添加较慢的运动在一端或两端。此功能使您能够添加加速他们的影响,放缓的影响,或两者兼而有之。 |
None | 增加了一个匀速运动从开始到结束没有影响,减缓或加速。这一转变也称为线性过渡。 |
你可以使用上述任何方法进行动画样式定义
相关文章推荐
- FusionChart完全入门手册 -1
- FusionChart完全入门手册9
- FusionChart完全入门手册4-开启实例化讲解
- FusionChart完全入门手册4
- FusionChart完全入门手册-3
- FusionChart完全入门手册5
- FusionChart完全入门手册6
- FusionChart完全入门手册7
- Fvwm新手入门不完全手册(转载)
- FusionCharts完全入门手册10
- FVWM新手入门不完全手册
- FusionChart完全入门手册 -2
- FusionCharts完全入门手册11
- Spark插件开发完全入门手册,多级组织架构初步(原创)
- Windows 8 系统完全上手指南 - 非常详尽的 Win8 系统入门学习手册与使用技巧专题教程!
- FusionCharts完全入门手册12
- Fvwm新手入门不完全手册(原创)
- 发布NBearLite中文版完全参考手册 + NBearLite 10分钟入门教程 + NBearLite v1.0.0.7 beta
- 【入门】游戏运营不完全手册
- 发布NBearLite中文版完全参考手册 + NBearLite 10分钟入门教程 + NBearLite v1.0.0.7 beta