將動畫新增至控制項 (VB)
ASP.NET AJAX Control Toolkit 中的動畫控制項不只是控制項,而是將動畫新增至控制項的整個架構。 本教學課程示範如何設定這類動畫。
概觀
ASP.NET AJAX Control Toolkit 中的動畫控制項不只是控制項,而是將動畫新增至控制項的整個架構。 本教學課程示範如何設定這類動畫。
步驟
第一個步驟是像往常一樣,在頁面中包含 ScriptManager
,以便載入 ASP.NET AJAX 資料庫,而且可以使用 Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
此案例中的動畫會套用至看起來像這樣的文字面板:
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
</asp:Panel>
面板的相關聯 CSS 類別會定義背景色彩和寬度:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
接下來,我們需要 AnimationExtender
。 提供 ID
和一般 runat="server"
之後,必須將 TargetControlID
屬性設定至控制項,以在我們的案例中產生動畫效果,面板:
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
整個動畫會使用 XML 語法以宣告方式套用,遺憾的是 Visual Studio 的 IntelliSense 目前並不完全支援。 根節點是在此節點內的 <Animations>;
,允許數個事件來判斷動畫的發生時間:
OnClick
(點按滑鼠)OnHoverOut
(當滑鼠離開控制項時)OnHoverOver
(當滑鼠停留在控制項上,停止OnHoverOut
動畫)OnLoad
(當載入頁面時)OnMouseOut
(當滑鼠離開控制項時)OnMouseOver
(當滑鼠停留在控制項上,不停止OnMouseOut
動畫)
架構隨附一組動畫,每個動畫都由它自己的 XML 元素表示。 以下是部分選項:
<Color>
(改變色彩)<FadeIn>
(淡入)<FadeOut>
(淡出)<Property>
(變更控制項的屬性)<Pulse>
(閃爍)<Resize>
(變更大小)<Scale>
(按比例變更大小)
在此範例中,面板應該淡出。動畫應該為 1.5 秒 (Duration
屬性),顯示每秒 24 個畫面格 (動畫步驟) (Fps
屬性)。 以下是控制項的完整標記 AnimationExtender
:
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<FadeOut Duration="1.5" Fps="24" />
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
當您執行此指令碼時,會顯示面板並在一秒半內淡出。
面板正在淡出 (點按以檢視完整大小的影像)