共用方式為

將動畫新增至控制項 (C#)

作者：Christian Wenz

下載 PDF

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>

當您執行此指令碼時，會顯示面板並在一秒半內淡出。

面板正在淡出

面板正在淡出 (點按以檢視完整大小的影像)

下一步

  • Last updated on