AJAX Control Toolkit Tutorial: AnimationExtender- Part Five

Animation is just the extender control which will add animation to the page. Animation can be played through a number of events attached to it like OnMouseOver, OnMouseOut, OnClick and OnLoad raised by the target control.

You can learn more in my previous parts here:

• AJAX Control Toolkit Tutorial: Introduction - Part One
• AJAX Control Toolkit Tutorial: Accordion - Part Two
• AJAX Control Toolkit Tutorial: AjaxFileUpload - Part Three
• AJAX Control Toolkit Tutorial: AlwaysVisibleControl- Part Four

There are a number of useful animation effects like fading, resizing, movement and much more.

Initial Code for implementation of animation.

<asp:Panel Direction="NotSet" ID="socialmediaicons" runat="server">

    <asp:Image ID="imgflagpak" runat="server" ImageUrl="~/Images/Flag_Of_Pakistan-1969px.jpg" Width="500px" BorderColor="Black" BorderStyle="Dotted" BorderWidth="3px" />

</asp:Panel>

<div class="row">

    <div id="ajaxcontroltoolkitplaceholder">

        <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="socialmediaicons">

            <Animations>

                <OnLoad>

                    <Sequence>

                        <Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style" PropertyKey="color" />

                        <OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />

                    </Sequence>

                </OnLoad>

            </Animations>

        </ajaxToolkit:AnimationExtender>

    </div>

Output

Now let’s discuss its properties

Properties

OnLoad

It can call animation as soon as the page load event fires.

<asp:Panel Direction="NotSet" ID="socialmediaicons" runat="server">

    <asp:Image ID="imgflagpak" runat="server" ImageUrl="~/Images/Flag_Of_Pakistan-1969px.jpg" Width="500px" BorderColor="Black" BorderStyle="Dotted" BorderWidth="3px" />

</asp:Panel>

<div class="row">

    <div id="ajaxcontroltoolkitplaceholder">

        <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="socialmediaicons">

            <Animations>

                <OnLoad>

                    <Sequence>

                        <Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style" PropertyKey="color" />

                        <OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />

                    </Sequence>

                </OnLoad>

            </Animations>

        </ajaxToolkit:AnimationExtender>

    </div>

 

Inside the Animations section we have declared OnLoad Server Property to initialize it on page load.

As you can see in the code we have used Sequence tag; also where we have declared multiple animation effects firstly it take three seconds and then it changes its opacity to 0.5 percent.

Check it out in action,



OnClick

The animation starts playing on button, image or any clickable thing.

<OnClick>

    <Sequence>

        <Resize Width="2000" Height="150" />

        <FadeIn Duration="2" Fps="20" />

    </Sequence>

</OnClick>

Code first resizes the picture and then fades in animation after a two second duration.

Output



OnMouseOver

Animation is played when mouse moves over the target control.

<OnMouseOver>

    <Sequence>

        <Parallel AnimationTarget="imgflagpak" Duration="1">

            <FadeIn Duration="2" Fps="20" />

        </Parallel>

    </Sequence>

</OnMouseOver>

See this in action,

OnMouseOut

Animation is played when mouse moves out of the target control.

<OnMouseOut>

    <Sequence>

        <Parallel AnimationTarget="imgflagpak" Duration="1">

            <FadeIn Duration="2" Fps="20" />

            <Scale Duration="1" Fps="20" ScaleFactor="4.0" Center="true" />

        </Parallel>

    </Sequence>

</OnMouseOut>

 

Output

 
OnHoverOver

Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays

<OnHoverOver>

    <Sequence>

        <FadeOut Duration="2" MinimumOpacity="0.5" MaximumOpacity="1" />

        <ScriptAction Script="alert('on hover over');" />

    </Sequence>

</OnHoverOver>

 

Output
 

OnHoverOut

Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays

<OnHoverOut>

    <Sequence>

        <FadeOut Duration="2" MinimumOpacity="0.5" MaximumOpacity="1" />

        <ScriptAction Script="alert('on hover out');" />

    </Sequence>

</OnHoverOut>

 

Output