基于ASP.NET AJAX低级动画技术开发Web 2.0应用程序

来源：作者：IT168 朱先忠出处：巧巧读书 2007-11-04 进入讨论组

六、创建离散动画效果
现在，让我们讨论另外一种类型的动画—DiscreteAnimation。首先，在这种动画与前面讨论的两种动画LengthAnimation和NumberAnimation之间依然存在某些相似性，例如同样可以在某个特定的时间内依次给出某个范围内的值。

不过，对于动画LengthAnimation和NumberAnimation而言，只需给出开始值和结束值即可，由MS AJAX框架负责计算所有的中间值。但对于离散动画而言，我们必须给出动画过程中的所有中间值，例如26个英文字母的列表或一串单词的列表等。然后，在动画播放过程中，由DiscreteAnimation实时地播放出这个序列中的每一个值。这种动画也支持例如target，property，duration，fps，isActive，isPlaying，percentComplete等属性，但还提供了一个特有的属性—values。这个values属性用于指定动画过程中的所有中间值，并用逗号将所有可选值连接起来，组成一个字符串。

下面，让我们创建一个利用离散技术创建动画效果的例子。仍然使用鼠标右键单击工程GlitzTest并且添加一个新的网页，并命名为discrete.aspx。下列的图7展示了示例页面的设计时刻屏幕快照。
基于ASP.NET AJAX低级动画技术开发Web 2.0应用程序（图七）

图７—离散动画演示网页设计时刻快照。

如果你按下F5运行这个例子，那么，你将看到一个离散动画过程：屏幕中的文本标签内容依次从“Sunday”改变到“Saturday”。在此，我们依然只讨论相应的xml-script编码部分。

<script type="text/xml-script"> 
<page xmlns:demo="demo"> 
<components> 
<label id="sampleLabel" /> 
<discreteAnimation id="wordAnimation" 
target="sampleLabel" property="text" 
values="'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'" 
duration="3" /> 

<button id="startButton"> 
<click> 
<invokeMethodAction target="wordAnimation" method="play" /> 
</click> 
</button> 
</components> 
</page> 
</script>

在上面的脚本中，我们首先把一个名为sampleLabel的<span>元素与一个MS AJAX客户端Label控件建立关联（此控件将对应离散动画的目标元素）。然后，创建了一个名为discreteAnimation的结点，其属性target指向标签sampleLabel，属性property指向控件sampleLabel的text属性。当然，这里最重要的属性还是values，它的值是一个由多个可选元素组成并以逗号间隔的字符串。读者应该猜出，如果我们在此指定一串整数，则完全可以模拟一个倒计时秒表的效果。仅此而已。URL:http://www.qqread.com/ajax/f379699.html