AnimationExtender控件--动画集锦

功能：
        用来美化、装饰网站等。
属性：
         OnLoad：表示要触发的事件是加载页面时。 
         OnClick：表示要触发的事件是单击控件时。 
         OnMouseOver：表示要触发的事件是鼠标滑过时。 
         OnMouseOut：表示要触发的事件是鼠标移走时 
         OnHoverOver：与OnMouseOver类似，对特定控件而言。 
         OnHoverOut：与OnMouseOut类似，对特定控件而言。 
 

1．变色颜色的动画效果
        本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
     Duration：动画显示效果的时间间隔。
     PropertyKey：要设置的属性值。
     StartValue：属性的开始值。
     EndValue：属性的结束值。

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

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

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

代码实例：

< body  onload ="focus();" >
   < div  class ="banner" >
     < a  href ="http://abcdwxc.cnblogs.com/"  target ="_blank" >  AnimationExtender控件的使用------王晓成的博客
     </ a >
   </ div >
   < div  class ="description" >
    请单击,移到上面，及移出 < strong > “请按下我！” </ strong > ，来看看它会有什么样的变化。
   </ div >
   < p  />
   < form  id ="form1"  runat ="server" >
     < div >
       < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
       </ asp:ScriptManager >
       < ajaxToolkit:AnimationExtender  ID ="AE"
                                     runat ="server"
                                     TargetControlID ="myPanel" >
         < Animations >
             < OnClick >
               < FadeOut  Duration ="2"  Fps ="10"   />
             </ OnClick >
             < OnMouseOver >
             < Color  Duration =".2"  PropertyKey ="color"  StartValue ="#FFFFFF"  EndValue ="#FF0000"   />
             </ OnMouseOver >
             < OnMouseOut >
                 < Color  Duration =".2"   PropertyKey ="color"  StartValue ="#000000"  EndValue ="#FFFFFF"   />
             </ OnMouseOut >
         </ Animations >
       </ ajaxToolkit:AnimationExtender >
     </ div >
     < div  align ="center" >
       < asp:Panel  ID ="myPanel"  runat ="server"  style ="cursor:pointer;" >
        请按下我！
       </ asp:Panel >
     </ div >
   </ form >
</ body >

运行结果：