信息化 频道

选购ERP “上对花轿嫁对郎”



六、 创建离散动画效果
    现在,让我们讨论另外一种类型的动画—DiscreteAnimation。首先,在这种动画与前面讨论的两种动画LengthAnimation和NumberAnimation之间依然存在某些相似性,例如同样可以在某个特定的时间内依次给出某个范围内的值。不过,对于动画LengthAnimation和NumberAnimation而言,只需给出开始值和结束值即可,由MS AJAX框架负责计算所有的中间值。但对于离散动画而言,我们必须给出动画过程中的所有中间值,例如26个英文字母的列表或一串单词的列表等。然后,在动画播放过程中,由DiscreteAnimation实时地播放出这个序列中的每一个值。这种动画也支持例如target,property,duration,fps,isActive,isPlaying,percentComplete等属性,但还提供了一个特有的属性—values。这个values属性用于指定动画过程中的所有中间值,并用逗号将所有可选值连接起来,组成一个字符串。

    下面,让我们创建一个利用离散技术创建动画效果的例子。仍然使用鼠标右键单击工程GlitzTest并且添加一个新的网页,并命名为discrete.aspx。下列的图7展示了示例页面的设计时刻屏幕快照。 
   

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

    如果你按下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,它的值是一个由多个可选元素组成并以逗号间隔的字符串。读者应该猜出,如果我们在此指定一串整数,则完全可以模拟一个倒计时秒表的效果。仅此而已。
0
相关文章