FusionCharts完全入门手册13

最新推荐文章于 2010-09-26 14:08:00 发布

weixin_30405421

最新推荐文章于 2010-09-26 14:08:00 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tippoint/archive/2010/09/06/1818989.html

本文详细介绍了如何在图表中实现自定义背景动画及元素动画，包括背景渐变、滑动及图表标题的弹性动画效果，并提供了具体的代码示例。

我们讨论完FC3的样式后，返回头看看我们前面第4节说到的问题，我们如何实现自定义背景动画和自定义动画呢，看到这里，系列看完文章的朋友可以很快得到答案—使用样式，对。那接下来我们就用实例看看如何实现自定义动画。

1．自定义背景动画

我们还是使用前面例子的代码

代码

1 <chart caption='月度销售额' xAxisName='月度' yAxisName='单位(台)' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='0' baseFont='宋体' baseFontSize='12' >
2 <set label='一月' value='462' />
3 <set label='二月' value='857' />
4 <set label='三月' value='671' alpha='20' />
5 <set label='四月' value='494' />
6 <set label='五月' value='761' />
7 <set label='六月' value='960' />
8

在这里，我们想要实现的效果是，让背景渐变显示出来。那我们需要在上面的代码后面增加如下的代码；

代码

那好，这个效果是什么呢，就是画布渐变显示，时间为1秒。

那，我如果想让背景从左侧滑入，然后同时是渐变呢，代码又应该怎么写呢？

那我们需要在定义一个样式，比如叫testAnim2，完整的代码如下

代码

1 <styles>
2       <definition>
3              <style name='testAnim2' type='ANIMATION' duration='1' start=' $canvasStartX-30 ' param="_x" />
4              <style name='testAnim' type='ANIMATION' duration='1' start='0' param="_alpha" />
5       </definition>
6      <application>
7         <apply toObject='Canvas' styles='testAnim2,testAnim' />
8       </application>
9 </styles>
10

注意这里我们用了一个宏参数$canvasStartX，大家可以复习一下

2．自定义动画

我们除了对背景可以进行自定义动画外，我们还可以对图表的任何对象实施动画效果，这里，我们以标题为例。

代码

1 <styles>
2       <definition>
3              <style name='testAnim3' type='ANIMATION' duration='1' start='30' param="_x" Easing="elastic" />
4       </definition>
5      <application>
6         <apply toObject='caption' styles='testAnim3' />
7       </application>
8 </styles>
9

大家可以看到这里的动画效果是弹性的效果-- Easing="elastic" 我们换个值bounce 看看反弹效果是什么 Easing=" bounce "因为这些是动画效果，大家可以自行查看。

使用动画效果我们可以实现 xy轴移动、透明度变化、xy轴缩放、圆周动画以及5种动画类型选择（Elastic、Bounce、Strong、Regular、none）等