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 可以用脚本控制。

Code
<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参考：

　　

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