Animation Demonstration
来源:互联网 发布:ubuntu dns配置详解 编辑:程序博客网 时间:2024/04/28 09:14
Animation Demonstration
The animation support in the Toolkit is more than just a control. It's a pluggable, extensible framework for easily adding animation effects to your web pages.
The sample below demonstrates a composite animation consisting of four primary animation actions, done in parallel:
· Move (to move the panel to its final location)
· Resize (to change the size of the panel)
· Fade (to fade the text in/out)
· Color (the flyout changes from gray to white and the text pulses red)
Show代码:
<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button --%>
<EnableAction Enabled="false" />
<%-- Show the flyout --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Height="260" Width="280" />
<Color AnimationTarget="flyout" PropertyKey="backgroundColor"
StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Fade in the text --%>
<FadeIn AnimationTarget="info" Duration=".2"/>
<%-- Cycle the text and border color to red and back --%>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor"
StartValue="#666666" EndValue="#FF0000" />
</Parallel>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor"
StartValue="#FF0000" EndValue="#666666" />
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
关闭代码:
<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Scale the flyout down to 5% to make it disappear --%>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true"
ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the styles on the info box --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="250px"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<%-- Re-enable the button --%>
<EnableAction Enabled="true"
AnimationTarget="btnInfo" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
By composing basic animations (there are many to choose from!) you can create very sophisticated effects, or use them independently from client code, server-side code, or XML markup.
X
Once you get the general idea of the animation's markup, you'll want to play a bit. All of the animations are created from simple, reusable building blocks that you can compose together. Before long you'll be creating dazzling visuals. By grouping steps together and specifying them to be run either in sequence or in parallel, you'll achieve almost anything you can imagine, without writing a single line of code!
The XML defining the animations is very easy to learn and write, such as this example's show and close markup.
<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button --%>
<EnableAction Enabled="false" />
<%-- Show the flyout --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Height="260" Width="280" />
<Color AnimationTarget="flyout" PropertyKey="backgroundColor"
StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Fade in the text --%>
<FadeIn AnimationTarget="info" Duration=".2"/>
<%-- Cycle the text and border color to red and back --%>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor"
StartValue="#666666" EndValue="#FF0000" />
</Parallel>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor"
StartValue="#FF0000" EndValue="#666666" />
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Scale the flyout down to 5% to make it disappear --%>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true"
ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the styles on the info box --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="250px"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<%-- Re-enable the button --%>
<EnableAction Enabled="true"
AnimationTarget="btnInfo" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Animation Description
The AnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.
The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference.
Animation Properties
The animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
· TargetControlID - ID of the target control whose events are used to animate (this is also the default target of the animations)
· OnLoad - Generic animation played as soon as the page is loaded
· OnClick - Generic animation played when the target control is clicked
· OnMouseOver - Generic animation played when the mouse moves over the target control
· OnMouseOut - Generic animation played when the mouse moves out of the target control
· OnHoverOver - Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays
· OnHoverOut - Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays
- Animation Demonstration
- Accordion Demonstration
- AlwaysVisibleControl Demonstration
- AutoComplete Demonstration
- Calendar Demonstration
- CascadingDropDown Demonstration
- CollapsiblePanel Demonstration
- ConfirmButton Demonstration
- DragPanel Demonstration
- DropDown Demonstration
- CodeForces192D Demonstration
- trigger update demonstration
- A. Wizards and Demonstration
- VIP FAILOVER DEMONSTRATION
- codeforces 192D Demonstration
- Let you computer demonstration week
- NOJ [1078] Wizards and Demonstration
- animation
- uClinux ReadMe
- [SQL] left join/right join/inner join操作演示
- 函数调用约定
- C#获取Excel和Access连接的写法
- 转 vc对象模型.
- Animation Demonstration
- 关于web.xml文件
- u-boot启动过程分析——基于lpc2210的移植代码[转]
- php创建多级目录
- ZedGraph 未找到或本身尚缺的功能
- 调用约定
- Ajax 是如何运行的?
- STL-MAP用法全讲
- Some Cool Tips for .NET(一些技巧FOR .NET)