功能:
用來美化、裝飾網站等。
屬性:
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”,其中兩個動畫控件有着相同的屬性,屬性内容如下:
Fps:幀/秒的顯示速度。
minimumOpacity:最小透明度。
4.可伸縮的動畫效果
本例要實作的效果是,當單擊Panel時,變化Panel的高度和寬度。這需要使用“Resize Animation”動畫控件。其屬性主要有5個:
duration:動畫效果的時間間隔。
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>,來看看它會有什麼樣的變化。


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


</form>

</body>
部落格園大道至簡
<a href="http://www.cnblogs.com/jams742003/" target="_blank">http://www.cnblogs.com/jams742003/</a>
轉載請注明:部落格園