FusionCharts完全入门手册13

 

我们讨论完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 

 

 

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

代码

< styles >
       < definition >
             < style  name ='testAnim'  type ='ANIMATION'  duration ='1'  start ='0'  param ="_alpha"   />
       </ definition >
      < application >
< apply  toObject ='Canvas'  styles =' testAnim '   />
       </ application >
</ styles >

 

那好，这个效果是什么呢，就是画布渐变显示，时间为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）等