Wednesday, September 21

Ajax Animation Extender


<ajaxToolkit:AnimationExtender ID="ae"
  runat="server" TargetControlID="ctrl">
    <Animations>
        <OnLoad> ... </OnLoad>
        <OnClick> ... </OnClick>
        <OnMouseOver> ... </OnMouseOver>
        <OnMouseOut> ... </OnMouseOut>
        <OnHoverOver> ... </OnHoverOver>
        <OnHoverOut> ... </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>


//////////////////////////////////////////////////////////////////////
Under Close Button
<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>

Under Show Button

<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>

       

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty