<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    Title="Animation Reference" %>
<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    <div class="walkthrough">
    <div class="heading">Animation Reference</div>
    
        <a href="#Animation">Animation</a><br />
        <a href="#ParentAnimation">Parent Animation</a><br />
        <a href="#ParallelAnimation">Parallel Animation</a><br />
        <a href="#SequenceAnimation">Sequence Animation</a><br />
        <a href="#SelectionAnimation">Selection Animation</a><br />
        <a href="#ConditionAnimation">Condition Animation</a><br />
        <a href="#CaseAnimation">Case Animation</a><br />
        <a href="#FadeAnimation">Fade Animation</a><br />
        <a href="#FadeInAnimation">FadeIn Animation</a><br />
        <a href="#FadeOutAnimation">FadeOut Animation</a><br />
        <a href="#PulseAnimation">Pulse Animation</a><br />
        <a href="#PropertyAnimation">Property Animation</a><br />
        <a href="#DiscreteAnimation">Discrete Animation</a><br />
        <a href="#InterpolatedAnimation">Interpolated Animation</a><br />
        <a href="#ColorAnimation">Color Animation</a><br />
        <a href="#LengthAnimation">Length Animation</a><br />
        <a href="#MoveAnimation">Move Animation</a><br />
        <a href="#ResizeAnimation">Resize Animation</a><br />
        <a href="#ScaleAnimation">Scale Animation</a><br />
        <a href="#Action">Action</a><br />
        <a href="#EnableAction">Enable Action</a><br />
        <a href="#HideAction">Hide Action</a><br />
        <a href="#StyleAction">Style Action</a><br />
        <a href="#OpacityAction">Opacity Action</a><br />
        <a href="#ScriptAction">Script Action</a><br />
    
        <a name="Animation" /><div class="subheading">Animation</div>
        <p>
            <span class="codeReference">Animation</span> is an abstract base class used as a starting point for all the other animations.
            provides the basic mechanics for the animation (playing, pausing, stopping, timing, etc.)
            and leaves the actual animation to be done in the abstract methods <span class="codeReference">getAnimatedValue</span>
            and <span class="codeReference">setValue</span>.            
        </p>
        <table class="animationReferenceTable">
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Tag:</td>
                <td class="animationReferenceCode">Animation</td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Class:</td>
                <td class="animationReferenceCode">AjaxControlToolkit.Animation.Animation</td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Base:</td>
                <td class="animationReferenceCode">Sys.Component</td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Constructor:</td>
                <td class="animationReferenceCode">new AjaxControlToolkit.Animation.Animation(target, duration, fps);</td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Play:</td>
                <td class="animationReferenceCode">AjaxControlToolkit.Animation.Animation.play(target, duration, fps);</td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Properties:</td>
                <td class="animationReferenceItems">
                    <table class="animationReferenceItemTable">
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Number duration;</div>
                                Length of time to play the animation (in seconds).  The default value is 1.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Number fps;</div>
                                Number of frames per second shown when animating.  The default values is 25.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Boolean isActive; // Read Only</div>
                                <span class="codeReference">true</span> if animation is active, <span class="codeReference">false</span> if not.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Boolean isInitialized; // Read Only</div>
                                Inherited from <span class="codeReference">Sys.Component</span>
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Boolean isPlaying; // Read Only</div>
                                Inherited from <span class="codeReference"><a href="#Animation">AjaxControlToolkit.Animation.Animation</a></span>
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Boolean isUpdating; // Read Only</div>
                                <span class="codeReference">true</span> if animation is playing, <span class="codeReference">false</span> if not.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Number percentComplete; // Read Only</div>
                                Percentage of the animation already played.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">Object target;</div>
                                Target element that the animation should operate on.  (<b>Note:</b> Do not set this property in
                                a generic xml animation description.  It will be set automatically using either the <span class="codeReference">TargetControlID</span>
                                or the <span class="codeReference">AnimationTarget</span> properties.)
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="animationReferenceRow">
                <td class="animationReferenceField">Methods:</td>
                <td class="animationReferenceItems">
                    <table class="animationReferenceItemTable">
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">dispose();</div>
                                Dispose the animation
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">getAnimatedValue();</div>
                                Determine the state of the animation after the given percentage of its duration has elapsed
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">getDescriptor();</div>
                                Inherited from <span class="codeReference">Sys.Component</span>
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">interpolate(start, end, percentage);</div>
                                Given two <span class="codeReference">Number</span>s <span class="codeReference">start</span> and
                                <span class="codeReference">end</span>, the <span class="codeReference">interpolate</span> function
                                will produce another <span class="codeReference">Number</span> the specified
                                <span class="codeReference">percentage</span> between the two values.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">onEnd();</div>
                                Perform any cleanup after playing the animation.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">onStart();</div>
                                Perform any initialization before playing the animation.
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">onStep(percentage);</div>
                                Progress the animation through each frame
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">pause();</div>
                                Pause the animation
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">play();</div>
                                Play the animation
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">setOwner(owner);</div>
                                Inherited from <span class="codeReference">Sys.Component</span>
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">
                            <td class="animationReferenceItem">
                                <div class="animationReferenceItemCode">setValue(value);</div>
                                Set the current state of the animation
                            </td>
                        </tr>
                        <tr class="animationReferenceItemRow">