Animation控件的使用语法

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl">
    <Animations>
        <OnLoad> ... </OnLoad>
        <OnClick> ... </OnClick>
        <OnMouseOver> ... </OnMouseOver>
        <OnMouseOut> ... </OnMouseOut>
        <OnHoverOver> ... </OnHoverOver>
        <OnHoverOut> ... </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>
其中各属性的说明如下：
l OnLoad：表示要触发的事件是加载页面时。
l OnClick：表示要触发的事件是单击控件时。
l OnMouseOver：表示要触发的事件是鼠标滑过时。
l OnMouseOut：表示要触发的事件是鼠标移走时。
l OnHoverOver：与OnMouseOver类似，对特定控件而言。
l OnHoverOut：与OnMouseOut类似，对特定控件而言。
1．变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
l Duration：动画显示效果的时间间隔。
l PropertyKey：要设置的属性值。
l StartValue：属性的开始值。
l EndValue：属性的结束值。

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations >
            <OnMouseOver>
                <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
            </OnMouseOver>
            <OnMouseOut>
                <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
            </OnMouseOut>
</Animations>

2．淡入淡出合并的动画效果
淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：
l duration：动画效果的时间间隔。
l Fps：帧/秒的显示速度。
l maximumOpacity：最大透明度。
l minimumOpacity：最小透明度。

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations >
        <OnMouseOver>
        <Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
       </OnMouseOver>
        <OnMouseOut >
        <Fade duration="1"   Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
        </OnMouseOut>
        </Animations>
        </ajaxToolkit:AnimationExtender>

3．淡入和淡出分开的动画效果
上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：
l duration：动画效果的时间间隔。
l Fps：帧/秒的显示速度。
l maximumOpacity：最大透明度。
l minimumOpacity：最小透明度。

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations >
        <OnMouseOver>
        <FadeIn duration="1"   Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
       </OnMouseOver>
        <OnMouseOut >
        <FadeOut duration="1"   Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
        </OnMouseOut>
        </Animations>
</ajaxToolkit:AnimationExtender>


4．可伸缩的动画效果
本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：
l duration：动画效果的时间间隔。
l Fps：帧/秒的显示速度。
l width：变化后的宽度。
l height：变化后的高度。
l unit：高度和宽度的单位，通常为“px”。

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations >
        <OnClick>
        <Resize duration=".1"   Fps="20" width="300" height="150" unit="px" />
       </OnClick>
       </Animations>
        </ajaxToolkit:AnimationExtender>

5.Action行为实例
Animation控件除了具备一些小的动画控件外，还支持几种特殊的Action行为，如控制按钮不可用、隐藏按钮和设置透明度等
1用EnableAction控件设置html的按钮点击后不可用：

ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
         TargetControlID="btn">
        <Animations >
            <OnClick>
                <EnableAction Enabled="false" />
            </OnClick></Animations>
        </ajaxToolkit:AnimationExtender>

2.StyleAction行为用来设计控件的一些属性，例如设置控件的背景色、高度等等，其包括3个属性：
l AnimationTarget：要实现特效的控件。
l Attribute：控件的某一属性，如display。
l Value：属性的值，如“None”。
例子是让按钮点击后隐藏：

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
        TargetControlID="btn">
        <Animations >
            <OnClick>
                <StyleAction AnimationTarget="btn" Attribute="display" Value="none"/>
            </OnClick></Animations>
</ajaxToolkit:AnimationExtender>

3.OpacityAction是控制透明度的行为。其主要包括3个属性：
l duration：动画效果的时间间隔。
l Fps：帧/秒的显示速度。
l opacity：透明度的值。
例子是让panel点击后透明度改变

   <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
        TargetControlID="Panel1">
        <Animations >
        <OnClick>
                <OpacityAction duration="0.1"   fps="20" opacity="0.6"/>
        </OnClick>
        </Animations>
        </ajaxToolkit:AnimationExtender>