AjaxControlToolKit 学习之：Animation

Animation
效果:颜色变化,弹出消失等动画.
功能:实现一些特殊的效果

实现:
1.触发事件
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="触发控件">
    <Animations>
        <OnLoad>……</OnLoad>
        <OnClick>……</OnClick>
        <OnMouseOver>……</OnMouseOver>
        <OnMouseOut>……</OnMouseOut>
        <OnHoverOver>……</OnHoverOver>
        <OnHoverOut>……</OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>

2.支持的效果
<Sequence>
   <Parallel>……</Parallel> //结合系列效果的序列
</Sequence>
a. 脉冲(变幻频率) <Pulse Duration=".1" />  //Duration:时间间隔
b. 渐消失 <FadeOut Duration=".5" Fps="20" />
c. 放缩 <Scale ScaleFactor="1.5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" />
      //  ScaleFactor:放大程度
      //  ScaleFont:设置文本内容是否也一起放大
d. 事件触发后改变目标样式 <StyleAction AnimationTarget="dv" Attribute="display" Value="block"/>
e. 目标的移动位置 <Move Horizontal="150" Vertical="-50" />
f.  颜色变化  <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
        //PropertyKey:取值(color,borderColor,backgroundColor)
g. 执行脚本 <ScriptAction Script="Cover($get('ctl00_SampleContent_infoBtn'), $get('flyout'));" />

3. 实例
实例一:颜色变化的动画效果
<Color Duration=".2" PropertyKey="color" StartValue="#ffffff" EndValue="#ff0000"></Color>
属性：
Duration:动画显示的效果的时间间隔
PropertyKey:要设置的属性值
StartValue:属性的开始值
EndValue:属性的结束值

    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
    </div>
        <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
        <Animations>
        <OnMouseOver>
        <Color Duration=".2" PropertyKey="color" StartValue="#ffffff" EndValue="#ff0000"></Color>
        </OnMouseOver>
        <OnMouseOut>
        <Color Duration=".2" PropertyKey="color" StartValue="#ff0000" EndValue="#ffffff"></Color>
        </OnMouseOut></Animations>
        </ajaxToolkit:AnimationExtender>
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">变化的文本</asp:Panel>
    </form>

实例二:谈入谈出合并的动画效果
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
属性：
Duration:动画显示的效果的时间间隔
Fps:帧/秒的显示速度
MaximumOpacity:最大透明度
MinimumOpacity:最小透明度