Home / AJAX

HOW TO Use the Animation Control

RSS
Modified on 2010/01/18 05:26 by Mike Pope Categorized as Uncategorized

Animation Demonstration



Animation Description

The AnimationExtender class lets you use a 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.

You specify the animation to play declaratively using XML. For information about how to create generic animation declarations and about other ways to use the animation framework, see the Using Animations walkthrough. The framework provides animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference entry.

Video - How Do I: Get Started with the ASP.NET AJAX Animation Extender Control?



Animation Client Code Sample




Animation Client Reference

Sys.Extended.UI.Animation.AnimationBehavior Class

  • Summary - Associates animations (described using JSON) with events and plays the animations when the events are raised. The AnimationBehavior class relies on the Microsoft Ajax Control Toolkit animation framework provided in Animation.js and on the GenericAnimationBehavior class defined later in this document.
  • Parameters - Sys.UI.DomElement element

Methods

  • initialize() - Initializes the animations and related handlers.
  • dipose() - Disposes the animations and related handlers.
  • OnClick() - Plays the OnClick animation.
  • OnMouseOver() - Plays the OnMouseOver or OnHoverOver animation.
  • OnMouseOut() - Plays the OnMouseOver or OnHoverOver animation.

Properties

  • OnLoad - Gets or sets a value that indicates whether the OnLoad event causes the specified animation to play immediately.
    • Remarks - The animation is defined using JSON format.
  • OnLoadBehavior - Gets the generic OnLoad animation's behavior.
  • OnClick - Gets or sets the generic OnClick animation's JSON definition.
  • OnClickBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object that contains the generic OnClick animation's behavior.
  • OnMouseOver - Gets or sets the generic OnMouseOver animation's JSON definition.
  • OnMouseOverBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object that contains the generic OnMouseOver animation's behavior.
  • OnMouseOut - Gets or sets the generic OnMouseOut animation's JSON definition.
  • OnMouseOutBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object that contains the generic OnMouseOut animation's behavior.
  • OnHoverOver - Gets or sets contains the generic OnHoverOver animation's JSON definition.
  • OnHoverOverBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object that contains the generic OnHoverOver animation's behavior.
  • OnHoverOut - Gets or sets the generic OnHoverOut animation's JSON definition.
  • OnHoverOutBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object that contains the generic OnHoverOut animation's behavior.

Sys.Extended.UI.Animation.GenericAnimationBehavior Class

  • Summary - Creates, plays, and disposes the animations that are created from a description specified in JSON format. Because many generic animations are available in the Toolkit, this behavior simplifies the amount of work required.
  • Parameters - Sys.UI.DomElement element

Methods

  • dipose() - Disposes the behavior and the associated animation.
  • disposeAnimation() - Disposes the animation.
  • play() - Plays the animation if it is not already playing.
    • Remarks - If the animation is already playing, this method has no effect.
  • stop() - Stops the animation if it is already playing.
  • quit() - Stops playing the animation without updating the final state.
    • Remarks - If the animation was moving, this method leaves it in the middle of its path. This method differs from the stop method. The stop method updates the final state. The quit method is most useful for scenarios where you are toggling back and forth between two animations, such as animations used with OnHoverOver and OnHoverOut events. In addition, you might not want to complete one animation if its counterpart is triggered.



Properties

  • json - Gets or sets a string that contains the animation description in JSON format.
  • animation - Gets or sets a Sys.Extended.UI.Animation.Animation object that contains the animation that is created from the JSON description.

Animation Server Code Sample

            <!-- Button used to launch the animation -->
            <asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="Click Here"/>
        
        <!-- Defines a "Wire frame" div element that is used to transition from the button to the info panel. -->
        <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
        
        <!-- Info panel to display as a flyout when the button is clicked. -->
        <div id="info" style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
            <div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
                <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close"
                    Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
            </div>
            <div>
                <p>
                    After you get the general idea of how an animation is defined in markup, you'll want to play a bit.  All 
                    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 run either in sequence or in parallel, you'll achieve almost anything you can
                    imagine, without writing a single line of code!
                </p>
                <br />
                <p>
                    The XML defining the animations is very easy to learn and write, such as this example's
                    <asp:LinkButton id="lnkShow" OnClientClick="return false;" runat="server">show</asp:LinkButton> and
                    <asp:LinkButton OnClientClick="return false;" id="lnkClose" runat="server">close</asp:LinkButton>
                    markup.
                </p>
            </div>
        </div>
        
        <script type="text/javascript" language="javascript">
            // Move an element directly on top of another element (and optionally
            // make it the same size).
            function Cover(bottom, top, ignoreSize) {
                var location = Sys.UI.DomElement.getLocation(bottom);
                top.style.position = 'absolute';
                top.style.top = location.y + 'px';
                top.style.left = location.x + 'px';
                if (!ignoreSize) {
                    top.style.height = bottom.offsetHeight + 'px';
                    top.style.width = bottom.offsetWidth + 'px';
                }
            }
        </script>
        
        <ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
            <Animations>
                <OnClick>
                    <Sequence>
                        <%-- Disable the button so it can't be clicked again. --%>
                        <EnableAction Enabled="false" />
                        
                        <%-- Position the wire frame on top of the button and display it. --%>
                        <ScriptAction Script="Cover($get('ctl00_SampleContent_btnInfo'), $get('flyout'));" />
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
                        
                        <%-- Move the wire frame from the button's bounds to the info panel's bounds. --%>
                        <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                            <Move Horizontal="150" Vertical="-50" />
                            <Resize Width="260" Height="280" />
                            <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
                        </Parallel>
                        
                        <%-- Move the info panel on top of the wire frame, fade it in, and hide the frame. --%>
                        <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
                        <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
                        <FadeIn AnimationTarget="info" Duration=".2"/>
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                        
                        <%-- Flash the text/border red and fade in the "close" button. --%>
                        <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">
                        <%--  Shrink the info panel out of view. --%>
                        <StyleAction Attribute="overflow" Value="hidden"/>
                        <Parallel Duration=".3" Fps="15">
                            <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                            <FadeOut />
                        </Parallel>
                        
                        <%--  Reset the sample so it can be played again. --%>
                        <StyleAction Attribute="display" Value="none"/>
                        <StyleAction Attribute="width" Value="250px"/>
                        <StyleAction Attribute="height" Value=""/>
                        <StyleAction Attribute="fontSize" Value="12px"/>
                        <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />
                        
                        <%--  Enable the button so it can be played again. --%>
                        <EnableAction AnimationTarget="btnInfo" Enabled="true" />
                    </Sequence>
                </OnClick>
                <OnMouseOver>
                    <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
                </OnMouseOver>
                <OnMouseOut>
                    <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
                </OnMouseOut>
             </Animations>
        </ajaxToolkit:AnimationExtender>
        
        <asp:Panel ID="xmlShow" runat="server" style="display: none; z-index: 3; background-color:#DDD; border: thin solid navy;">
            <pre style="margin: 5px">&lt;ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo"&gt;
&lt;Animations&gt;
    &lt;OnClick&gt;
        &lt;Sequence&gt;
           <em>&lt;%-- Disable the button --%&gt;</em>
            &lt;EnableAction Enabled="false" /&gt; 
           <em>&lt;%-- Show the flyout --%&gt;</em>
            &lt;Parallel AnimationTarget="flyout" Duration=".3" Fps="25"&gt;
                &lt;Move Horizontal="150" Vertical="-50" /&gt;
                &lt;Resize Height="260" Width="280" /&gt;
                &lt;Color AnimationTarget="flyout" PropertyKey="backgroundColor"
                        StartValue="#AAAAAA" EndValue="#FFFFFF" /&gt;
            &lt;/Parallel&gt;
          <em>&lt;%-- Fade in the text --%&gt; </em>
            &lt;FadeIn AnimationTarget="info" Duration=".2"/&gt;
          <em>&lt;%-- Cycle the text and border color to red and back --%&gt;</em>
            &lt;Parallel AnimationTarget="info" Duration=".5"&gt;
                &lt;Color PropertyKey="color"
                        StartValue="#666666" EndValue="#FF0000" /&gt;
                &lt;Color PropertyKey="borderColor"
                        StartValue="#666666" EndValue="#FF0000" /&gt;
            &lt;/Parallel&gt;
            &lt;Parallel AnimationTarget="info" Duration=".5"&gt;
                &lt;Color PropertyKey="color"
                        StartValue="#FF0000" EndValue="#666666" /&gt;
                &lt;Color PropertyKey="borderColor"
                        StartValue="#FF0000" EndValue="#666666" /&gt;
                &lt;FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" /&gt;
            &lt;/Parallel&gt;
        &lt;/Sequence&gt;
    &lt;/OnClick&gt;
&lt;/Animations&gt;
&lt;/ajaxToolkit:AnimationExtender&gt;</pre>
        </asp:Panel>
        
        <asp:Panel ID="xmlClose" runat="server" style="display: none; z-index: 3; background-color: #DDD; border: thin solid navy;">
            <pre style="margin: 5px">&lt;ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose"&gt;
&lt;Animations&gt;
    &lt;OnClick&gt;
        &lt;Sequence AnimationTarget="info"&gt;
          <em>&lt;%-- Scale the flyout down to 5% to make it disappear --%&gt;</em>
            &lt;Parallel Duration=".3" Fps="15"&gt;
                &lt;Scale ScaleFactor="0.05" Center="true"
                        ScaleFont="true" FontUnit="px" /&gt;
                &lt;FadeOut /&gt;
            &lt;/Parallel&gt;
          <em>&lt;%-- Reset the styles on the info box --%&gt;</em>
            &lt;StyleAction Attribute="display" Value="none"/&gt;
            &lt;StyleAction Attribute="width" Value="250px"/&gt;
            &lt;StyleAction Attribute="height" Value=""/&gt;
            &lt;StyleAction Attribute="fontSize" Value="12px"/&gt;
          <em>&lt;%-- Re-enable the button --%&gt;</em>
            &lt;EnableAction Enabled="true"
                    AnimationTarget="btnInfo" /&gt;
        &lt;/Sequence&gt;
    &lt;/OnClick&gt;
&lt;/Animations&gt;
&lt;/ajaxToolkit:AnimationExtender&gt;
        </pre>
        </asp:Panel>
        
        <ajaxToolkit:HoverMenuExtender ID="hm2" runat="server" TargetControlID="lnkShow" PopupControlID="xmlShow" PopupPosition="Bottom" />
        <ajaxToolkit:HoverMenuExtender ID="hm1" runat="server" TargetControlID="lnkClose" PopupControlID="xmlClose" PopupPosition="Bottom" />

Animation Server Reference

The animation behavior can be applied with the following extender (the italic properties are optional):

<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 - The ID of the target control whose events are used to play the animation. (This is also the default target of the animations.)
  • OnLoad - The generic animation to play as soon as the page is loaded.
  • OnClick - The generic animation to play when the target control is clicked.
  • OnMouseOver - The generic animation to play when the mouse moves over the target control.
  • OnMouseOut - The generic animation to play when the mouse moves out of the target control.
  • OnHoverOver - A generic animation similar to the one for OnMouseOver, except it will stop the OnHoverOut animation before it plays.
  • OnHoverOut - A generic animation similar to the one for OnMouseOut, except it will stop the OnHoverOver animation before it plays.



Animation Additional Code Samples