五、 创建数字动画效果
     这个NumberAnimation动画的特征十分类似于LengthAnimation（具有相同的属性，例如target，property，startValue，endValue，duration，fps，isActive，isPlaying，percentComplete，等等）；不过，也存在两处重要的区别。其一是，动画NumberAnimation的中间值在改变时可以带有小数（通过属性integralValues来设置实现）。于是，在某些特定场合下（例如对于长度单位米的处理），使用动画NumberAnimation将会带来更好的效果。第二个区别在于，动画LengthAnimation支持基于像素的动画的改变（通过属性unit来实现），而动画NumberAnimation却不是这样。
现在，让我们来看一个模拟倒计时的直观的例子。

    仍然使用鼠标右键单击工程GlitzTest并且添加一个新的网页，并命名为NumberAnimation2.aspx（注意，在本文示例工程GlitzTest中，我还提供了另一个展示动画NumberAnimation功能的例子—对应网页NumberAnimation.aspx。此动画的目标是通过逐渐改变行为OpacityBehavior的属性值来模拟淡入/淡出动画效果。具体实现请参考下载源码）。下列的图5展示了页面NumberAnimation2.aspx的设计时刻屏幕快照。 
   

    图5—数字动画演示网页设计时刻快照。

    在最开始，一个整数30显示于屏幕之上。随着把属性integralValues设置为false和动画过程的不断进行，屏幕上逐渐出现如图６所示的小数的情形。 
   

    图6—倒计时过程中屏幕出现小数的情形。
在这个例子中，我们在屏幕上放置了一个<span>元素用于表现要倒计时的内容，还有一个按钮来触发该动画过程。篇幅所限，我们仍然只讨论如下所示的xml-script编程部分：

//……省略 
<components> 
<label id="mynumber" /> 
<numberAnimation id="mynumberAnimation" 
target="mynumber" property="text" 
startValue="30" endValue="0" integralValues="false" duration="30" /> 
<button id="startButton"> 
<click> 
<InvokeMethodAction target="mynumberAnimation" method="play" /> 
</click> 
</button> 
</components> 

 
    在上面的脚本中，我们首先把一个名字为mynumber的<span>元素与一个MS AJAX客户端Label控件关联起来。注意，在此控件Label提供了一个名为text的属性，这个属性值的改变将显示于对应的<span>元素内。接下来，创建了一个名为numberAnimation的结点—其属性target指向标签mynumber，property设置为text，从而使动画的内容在控件mynumber中得以改变。然后，我们分别把两个相关的属性startValue和endValue设置为30和0。通过把属性integralValues的值设置为false，网页才能显示出小数部分；否则（设置为true的话），我们将看到一个倒计时的秒表效果的动画。

    总的来说，借助于动画NumberAnimation，我们可以非常容易地连续不断地改变某个值，并把这一过程与页面中的某个元素关联起来。