Animation动画控件
本章主要介绍一些具备特殊效果的组件,如动画、阴影、边角锐化等,AjaxControlToolkit工具包的主要功能就是提供一些个性化的组件,让网站界面美观。
本章主要介绍的组件有:Animation、DropShadow、RoundedCorners、ToggleButton和UpdatePanelAnimation。
21.1 Animation动画控件
Animation是非常有特色的动画控件,适合网站的装饰,本节主要介绍在AJAX中包含的多种动画效果,并以实例的形式显示如何应用这些特效。
21.1.1 简介
Animation控件的使用非常特殊,在VS2005中设计此控件时,并没有提供智能提示功能,所以在学习Animation控件的时候,需要掌握各个控件的各个属性,因为每个小的动画控件,其属性又各不相同。
虽然Animation提供了很多小的动画控件,但这些控件在使用时,必须遵守代码清单21-1所示的语法。
代码清单21-1 Animation控件的使用语法
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
其中各属性的说明如下:
l OnLoad:表示要触发的事件是加载页面时。
l OnClick:表示要触发的事件是单击控件时。
l OnMouseOver:表示要触发的事件是鼠标滑过时。
l OnMouseOut:表示要触发的事件是鼠标移走时。
l OnHoverOver:与OnMouseOver类似,对特定控件而言。
l OnHoverOut:与OnMouseOut类似,对特定控件而言。
Animation的动画效果如图21-1所示。
图21-1 Animation的动画效果
21.2.2 多种动画控件的实例
在Animation控件内,又包含了多个小的控件,为了清晰的掌握这些控件的使用,本节将为常用的几个小动画控件,分别做一个实例。
1.变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时,Panel的颜色发生变化,当鼠标移走时,Panel的颜色又发生了变化,这需要“Color Animation”。Color Animation动画的属性主要有4个:
l Duration:动画显示效果的时间间隔。
l PropertyKey:要设置的属性值。
l StartValue:属性的开始值。
l EndValue:属性的结束值。
本例的演示步骤如下:
(1)打开VS2005,新建一个AJAX Control Tookit网站,命名为“AjaxAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“AnimationSample_1.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。
(5)设计Panel的样式,源代码如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">
Animation第一个实例</asp:Panel>
(6)在AnimationExtender内设计动画效果,本例实现的是颜色的变化,使用的是“Color Animation”。最终动画效果设计如清单21-2所示。
代码清单21-2Animation颜色变化的设计代码
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
(7)切换到设计视图,最终效果如图21-2所示。
图21-2 动画效果设计视图
(8)按“Ctrl+S”保存所有的设计。
(9)将此页设置为起始页,按F5运行程序,当鼠标滑过Panel时,可以发现Panel的颜色发生了变化。
2.淡入淡出合并的动画效果
淡入淡出效果是网站中经常看到的效果,本例使用“Fade Animation”来实现这样的效果,“Fade Animation”的属性主要有4个:
l duration:动画效果的时间间隔。
l Fps:帧/秒的显示速度。
l maximumOpacity:最大透明度。
l minimumOpacity:最小透明度。
本实例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“AnimationSample_2.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。
(5)设计Panel的样式,源代码如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="104px" Width="249px">
Animation第二个实例</asp:Panel>
(6)在AnimationExtender内设计动画效果,本例实现的是淡入淡出效果,使用的是“Fade Animation”。最终动画效果设计如清单21-3所示。
代码清单21-3 Animation淡入淡出的设计代码
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut >
<Fade duration="1" Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
(7)切换到设计视图,最终效果如图21-3所示。
图21-3 动画效果设计视图
(8)按“Ctrl+S”保存所有的设计。
(9)将此页设置为起始页,按F5运行程序,当鼠标滑过Panel时,可以发现Panel的淡入淡出效果。
3.淡入和淡出分开的动画效果
上一个实例中,当鼠标滑过时,其实是完成两步:淡入和淡出。通常在实际应用中,淡入和淡出是分开的。本例要演示的是当鼠标滑过时,实现淡入效果,当鼠标移出时,实现淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”,其中两个动画控件有着相同的属性,属性内容如下:
l duration:动画效果的时间间隔。
l Fps:帧/秒的显示速度。
l maximumOpacity:最大透明度。
l minimumOpacity:最小透明度。
实例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“AnimationSample_3.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。
(5)设计Panel的样式,源代码如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="136px" Width="286px">
Animation第三个实例</asp:Panel>
(6)在AnimationExtender内设计动画效果,本例实现的是淡入淡出效果,使用的是“FadeIn Animation”和“FadeOut Animation”。最终动画效果设计如清单21-4所示。
代码清单21-4 Animation淡入淡出分开的设计代码
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<FadeIn duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut >
<FadeOut duration="1" Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
(7)切换到设计视图,最终效果如图21-4所示。
图21-4 动画效果设计视图
(8)按“Ctrl+S”保存所有的设计。
(9)将此页设置为起始页,按F5运行程序,当鼠标滑过Panel时,可以发现Panel的淡入效果,当鼠标滑出时,可以看到Panel的淡出效果。
4.可伸缩的动画效果
本例要实现的效果是,当单击Panel时,变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个:
l duration:动画效果的时间间隔。
l Fps:帧/秒的显示速度。
l width:变化后的宽度。
l height:变化后的高度。
l unit:高度和宽度的单位,通常为“px”。
本例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“AnimationSample_4.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。
(5)设计Panel的样式,源代码如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="Lavender" Height="121px" Width="322px">
Animation第四个实例</asp:Panel>
(6)在AnimationExtender内设计动画效果,本例实现的是变化高宽效果,使用的是“Resize Animation”。最终动画效果设计如清单21-5所示。注意使用的事件是“OnClick”。
代码清单21-5 Animation变化高宽的设计代码
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnClick>
<Resize duration=".1" Fps="20" width="300" height="150" unit="px" />
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
(7)切换到设计视图,最终效果如图21-5所示。
图21-5 动画效果设计视图
(8)按“Ctrl+S”保存所有的设计。
(9)将此页设置为起始页,按F5运行程序,当单击Panel时,可以发现Panel的高度和宽度都发生了变化。
21.3.3 Action行为实例
Animation控件除了具备一些小的动画控件外,还支持几种特殊的Action行为,如控制按钮不可用、隐藏按钮和设置透明度等。本节重点介绍三种行为:EnableAction、StyleAction和OpacityAction。
1.设置动画目标控件不可用
EnableAction用来设置控件为不可用状态,由于“Disabled”属性为HTML控件所有,所以在使用此行为时,目标控件应该为HTML控件。实例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“Animation_Action1.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个HTML Button。设置Button的属性如下所示。
<input type="button" id="btn" value="单击不可用" runat="server" />
(5)在AnimationExtender内设计动画效果,本例实现的是单击按钮后,此按钮变为不可用状态,使用的是“EnableAction”。最终动画效果设计如清单21-6所示。注意使用的事件是“OnClick”。
代码清单21-6 Animation的EnableAction行为设计
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="btn">
<Animations >
<OnClick>
<EnableAction Enabled="false" />
</OnClick></Animations>
</ajaxToolkit:AnimationExtender>
(6)按“Ctrl+S”保存所有的代码。
(7)将此页设置为起始页,按F5运行程序,当单击按钮时,可以发现按钮的状态,迅速变成了不可用。
2.设置动画目标控件的属性
StyleAction行为用来设计控件的一些属性,例如设置控件的背景色、高度等等,其包括3个属性:
l AnimationTarget:要实现特效的控件。
l Attribute:控件的某一属性,如display。
l Value:属性的值,如“None”。
实例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“Animation_Action2.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个HTML Button。设置Button的属性如下所示。
<input type="button" id="btn" value="单击隐藏" runat="server" />
(5)在AnimationExtender内设计动画效果,本例实现的是单击按钮后,此按钮不再显示,使用的是“StyleAction”。最终动画效果设计如清单21-7所示。注意使用的事件是“OnClick”。
代码清单21-7 Animation的StyleAction行为设计
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="btn">
<Animations >
<OnClick>
<StyleAction AnimationTarget="btn" Attribute="display" Value="none"/>
</OnClick></Animations>
</ajaxToolkit:AnimationExtender>
(6)按“Ctrl+S”保存所有的代码。
(7)将此页设置为起始页,按F5运行程序,当单击按钮时,可以发现按钮消失了。
3.设置动画目标控件的透明度
OpacityAction是控制透明度的行为。其主要包括3个属性:
l duration:动画效果的时间间隔。
l Fps:帧/秒的显示速度。
l opacity:透明度的值。
实例的演示步骤如下:
(1)打开网站“AJAXAnimationCtrl”。
(2)在网站根目录下,添加一个Web窗体,命名为“Animation_Action3.aspx”。
(3)切换到窗体的设计视图,添加一个ScriptManager。实现AJAX框架类的注册。
(4)再添加一个AnimationExtender和一个Panel。设置Panel的属性如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">
Animation Action 实例</asp:Panel>
(5)在AnimationExtender内设计动画效果,本例实现的是单击Panel后,Panel的透明度发生变化,使用的是“OpacityAction”。最终动画效果设计如清单21-8所示。注意使用的事件是“OnClick”。
代码清单21-8 Animation的OpacityAction行为设计
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="Panel1">
<Animations >
<OnClick>
<OpacityAction duration="0.1" fps="20" opacity="0.6"/>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
(6)按“Ctrl+S”保存所有的代码。
(7)将此页设置为起始页,按F5运行程序,当单击Panel时,可以发现Panel的透明度立刻发生了变化。
本节通过几个小的动画实例,演示了“Animation”控件的大部分动画效果,如果要了解更多的知识,请参考“http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#Animation”的内容。
转至:http://book.csdn.net/bookfiles/305/10030512730.shtml
Posted by Mars.Lei