AnimationExtender Tutorial
- 1). Add the following ScriptManager to the ASPX page to implement AJAX:
<asp:ScriptManager ID="SM1" runat="server" /> - 2). Add an ASP.NET panel control and drag an AnimationExtender from the toolkit to the ASPX page with the following code:
.Animation1
{
position: absolute;
padding:3px;
border: solid 1px #000;
}
..
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<br />
<asp:Panel ID="panel_Animated" runat="server" CssClass="Animation1">
Animation imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
</cc1:AnimationExtender>
</form> - 3). Animate the panel by inputting the following parameters into the Extender:
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
<Animations>
<OnLoad>
<Sequence>
<Move Horizontal="300" Duration="1" Fps="20" />
<FadeOut Duration="1" Fps="20" />
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender> - 4). Add a button to another panel on the ASPX page. This allows animation to be triggered by a button press:
.Animation2
{
display:none;
position:absolute;
width:1px;
height:1px;
left:400px;
top:600px;
padding:3px;
border:solid 1px #000;
}
..
<asp:Button ID="btn_Animate" runat="server" Text="Animate" OnClientClick="return false;" />
<br />
<asp:Panel ID="panel_Animated2" runat="server" CssClass="Animation2">
Animation2 imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btn_Animate">
<Animations>
<OnClick>
<Sequence AnimationTarget="panel_Animated2">
<EnableAction AnimationTarget="btn_Animate" Enabled="false" />
<StyleAction Attribute="display" Value="Block" />
<Parallel>
<FadeIn Duration="1" Fps="20" />
<Scale Duration="1" Fps="20" ScaleFactor="30.0" Center="true" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender> - 5). Ensure the ASPX page contains the following code:
<style>
.Animation1
{
position: absolute;
padding:3px;
border: solid 1px #000;
}
.Animation2
{
display:none;
position:absolute;
width:1px;
height:1px;
left:400px;
top:600px;
padding:3px;
border:solid 1px #000;
}
</style>
..
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<br />
<asp:Panel ID="panel_Animated" runat="server" CssClass="Animation1">
Animation imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
<Animations>
<OnLoad>
<Sequence>
<Move Horizontal="300" Duration="1" Fps="20" />
<FadeOut Duration="1" Fps="20" />
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender>
<br />
<br />
<asp:Button ID="btn_Animate" runat="server" Text="Animate" OnClientClick="return false;" />
<br />
<asp:Panel ID="panel_Animated2" runat="server" CssClass="Animation2">
Animation2 imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btn_Animate">
<Animations>
<OnClick>
<Sequence AnimationTarget="panel_Animated2">
<EnableAction AnimationTarget="btn_Animate" Enabled="false" />
<StyleAction Attribute="display" Value="Block" />
<Parallel>
<FadeIn Duration="1" Fps="20" />
<Scale Duration="1" Fps="20" ScaleFactor="30.0" Center="true" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
</form>