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

作者：IT168 朱先忠 2007-07-11

内容导航：

第1页：简介第2页：网页动画概述第3页：创建淡入/淡出动画效果第4页：创建长度动画效果第5页：创建数字动画效果第6页：创建离散动画效果第7页：创建高级复合动画效果第8页：小结

四、创建长度动画效果
    接下来，我们来学习另一种类型的动画—LengthAnimation。这种动画可以用来在某个开始和结束的范围内连续地改变某个属性值。这种动画的典型应用就是逐渐改变某个控件的长度和宽度属性值。

    注意，虽然这种LengthAnimation动画用来改变某个数值类型的属性值十分容易，只需要指定某开始值和结束值即可，但它也同样可以用来连续地改变文本类型的属性值。

    为了进一步了解这种动画的实现细节，下面表格列举了这种动画的一些常用的属性。

属性	描述
target	指定页面上将要应用该动画的元素的id
property	指定该动画将应用到页面元素中的哪个属性上
startValue	指定该动画将改变的值范围的开始值
endValue	指定该动画将改变的值范围的结束值
unit	指定该动画将改变的属性的单位。例如像素单位使用px，百分比单位使用%
duration	指定该动画将运行的时间长度，单位为秒
fps	获取或设置该动画的fps属性。默认值为25
isActive	获取一个布尔值，代表该动画是否已经开始运行
isPlaying	获取一个布尔值，代表该动画是否正在运行
percentComplete	获取一上0到100的数字，代表该动画目前完成运行的百分比

    表格1—动画LengthAnimation常用属性。

    下面，让我们来创建一个简单的长度动画。
如上面一样，仍然是右击工程GlitzTest添加一个新网页并命名为LengthAnimation.aspx。稍加修改，你会得到如下面图3所示的设计时刻快照。

图3—长度动画演示网页设计时刻快照。

下面的图４则展示了动画过程中的某一时刻的屏幕快照。

图4—长度动画演示过程中某一时刻的屏幕快照。
你可能已经猜出，动画的最后结果将显示一张最大的图片。
下面，让我们深入分析其中的逻辑。下面是代码相应于页面LengthAnimation.aspx的HTML代码部分。
//……省略
<img id="i" src="img\girl1.jpg" width="100" />
<hr />
<input type="button" id="startButton" value="Start"/>
注意，在此我们首先使用<img>标签创建了一幅图画，并直接指定其初始宽度值为100，而不是使用style属性指定其宽度值—这对于后面将改变我们的动画目标的属性width而言是极其重要的。后面的按钮定义不再赘述。
接下来，让我们分析真正吸引我们的相关xml-script编程部分，如下所示：

<script type="text/xml-script"> 
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> 
<components> 
<image id="i"> 
<behaviors> 
<LayoutBehavior id="Label1Style" /> 
</behaviors> 
</image> 

<lengthAnimation id="lani" 
target="Label1Style" property="width" 
startValue="100" endValue="480" fps='25' 
duration="5" > 
</lengthAnimation> 

<button id="startButton"> 
<click> 
<InvokeMethodAction target="lani" method="play" /> 
</click> 
</button> 
</components> 
</page> 
</script>

在此，我们首先使用<image>标签创建了一个Sys.Preview.UI.Image的实例（使其指向id为i的实际的HTML<img>元素）。然后，我们定义了一个LayoutBehavior（其id为“Label1Style”），并把它绑定到上面的图像实例上。注意，这个LayoutBehavior行为将用作后面定义的LengthAnimation动画的目标。通过连续地改变行为Label1Style的宽度（从100px改变到480px），使图像的尺寸发生相应的改变。注意，在此将属性duration的值设置得越小，图像变大的速度将越快。此外，如果把属性startValue的值设置得比endValue的值还大，则LengthAnimation动画将以相反的方向执行，即从属性startValue减小到endValue，表现为图像由原来的较大变得逐渐收缩。

【注】本人在实验中发现一件奇怪的事情：在上面的编程中，如果我们不引入行为LayoutBehavior作为“中介”，在点击按钮Start时只能导致屏幕上的图片一下子消失。这是否是一个“bug”？对于动画LengthAnimation而言，目前实在没有太多的参考资料，只能靠我们自己试验，试验，再试验……

1 2 3 4 5 6 7 8

【内容导航】

第1页：简介	第2页：网页动画概述
第3页：创建淡入/淡出动画效果	第4页：创建长度动画效果
第5页：创建数字动画效果	第6页：创建离散动画效果
第7页：创建高级复合动画效果	第8页：小结

[责任编辑：晓熊]

进入论坛>>相关论坛贴

热点文章排行