Ajax Toolkit 控件学习系列(11)——AnimationExtender

• AnimationExtender 这个控件呢，大概就是能给一个Panel等添加一些鼠标事件。点击事件等等。

 

• 还是看例子先。

　　开始加载，会有一个OnLoad响应，

　　加载之后，变成正常状态。其中鼠标移入和移出，都会有mouse的OVer和out变化。这里就不一一显示了。

　　点击之后，出现放大。触发了OnClick事件。

　　几个属性说明：
         OnLoad：表示要触发的事件是加载页面时。 
         OnClick：表示要触发的事件是单击控件时。 
         OnMouseOver：表示要触发的事件是鼠标滑过时。 
         OnMouseOut：表示要触发的事件是鼠标移走时 
         OnHoverOver：与OnMouseOver类似，对特定控件而言。 
         OnHoverOut：与OnMouseOut类似，对特定控件而言。

　　这个例子中所以涉及的参数简单说明：

•  Duration：动画显示效果的时间间隔。
•  PropertyKey：要设置的属性值。
• StartValue：属性的开始值。
• EndValue：属性的结束值。
• Fps：帧/秒的显示速度。
• maximumOpacity：最大透明度。
• minimumOpacity：最小透明度。  
• unit：高度和宽度的单位，通常为“px”。　
• ScriptAction 可以用脚本控制。

<div>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="updatePanel1" runat="server">
            <ContentTemplate>
                <ajax:AnimationExtender ID="ae" runat="server" TargetControlID="panel">
                    <Animations>
                        <OnLoad>
                            <Sequence>                
                                <ScriptAction Script="InitialLoad();" />                
                                <FadeIn  Fps="30" AnimationTarget="panel" />            
                            </Sequence>
                        </OnLoad>
                        <OnClick>
                            <Sequence >
                                <Pulse Duration="0.1" />
                                <Parallel Duration=".5" Fps="50">
                                    <FadeOut />
                                    <Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" />
                                </Parallel>
                                <Parallel Duration=".5" Fps="50">
                                    <FadeIn />
                                    <Scale ScaleFactor="0.2" Unit="px" Center="true" ScaleFont="True" FontUnit="pt" />
                                </Parallel>
                            </Sequence>
                        </OnClick>
                        <OnMouseOver>
                            <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
                        </OnMouseOver>
                        <OnMouseOut>
                            <Color Duration=".2"  PropertyKey="color" StartValue="#000000" EndValue="#FFFFFF" />
                        </OnMouseOut>
                    </Animations>
                </ajax:AnimationExtender>
                <div align="left">
                    <asp:Panel ID="panel" runat="server" Style="cursor: pointer;" CssClass="panel">
                        Click   
                    </asp:Panel>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

　　Load的JS参考：

　　

<script type ="text/javascript" language ="javascript">
        function InitialLoad()
        {
            var p = document.getElementById("panel");
            p.style.opacity="0";
            p.style.display="block";
        }
    </script>

　　

　　参考文章：动画集锦 http://www.cnblogs.com/abcdwxc/archive/2007/10/26/939054.html