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

  • 發行項

作者 ：一個是一個

下載 PDF

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 本教學課程說明如何設定這類動畫。

概觀

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 本教學課程說明如何設定這類動畫。

步驟

第一個步驟是像往常一樣包含在 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>

當您執行此腳本時，面板隨即顯示，並淡出一半秒。

面板淡出

面板淡出 (按一下即可檢視完整大小的影像)

下一步