|
1．变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
Duration：动画显示效果的时间间隔。
PropertyKey：要设置的属性值。
StartValue：属性的开始值。
EndValue：属性的结束值。
2．淡入淡出合并的动画效果
淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
3．淡入和淡出分开的动画效果
上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
4．可伸缩的动画效果
本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
width：变化后的宽度。
height：变化后的高度。
unit：高度和宽度的单位，通常为“px”。
代码实例：
<body onload="focus();">
<div class="banner">
<a href="http://abcdwxc.cnblogs.com/" target="_blank"> AnimationExtender控件的使用------王晓成的博客
</a>
</div>
<div class="description">
请单击,移到上面，及移出<strong>“请按下我！”</strong>，来看看它会有什么样的变化。
</div>
<p />
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:AnimationExtender ID="AE"
runat="server"
TargetControlID="myPanel">
<Animations>
<OnClick>
<FadeOut Duration="2" Fps="10" />
</OnClick>
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#000000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
</div>
<div align="center">
<asp:Panel ID="myPanel" runat="server" style="cursor:pointer;">
请按下我！
</asp:Panel>
</div>
</form>
</body>
作者：王晓成 | 文章来源：王晓成博客 | 更新时间：2007-10-27 10:11:52
|
上一篇文章： ASP.NET 2.0中客户端脚本使用总结…
下一篇文章： 使用PostSharp进行AOP框架设计：一个简单的原型 |
相关文章：
没有相关文章 |
MSN :xjcncn@hotmail.com
; 
QQ：359312
;地址：新疆乌鲁木齐市友好E时代公寓B座708 邮编：830000
