共用方式為

根據使用者互動繪製動畫 (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、TargetControlID 屬性和強制 runat="server"：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

在 <Animations> 節點內，有五種方式可以透過使用者互動啟動動畫 (遺失的元素是 <OnLoad>，在完整載入整個頁面之後執行)：

  • <OnClick> (用滑鼠按兩下控制項)
  • <OnHoverOut> (滑鼠離開控制項)
  • <OnHoverOver> (滑鼠停留在控制項上，停止 <OnHoverOut> 動畫)
  • <OnMouseOut> (滑鼠離開控制項)
  • <OnMouseOver> (滑鼠停留在控制項上，未停止 <OnMouseOut> 動畫)

在此案例中，會使用 <OnClick>。 當使用者點按面板時，會重設大小並同時淡出。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

按兩下滑鼠即可啟動動畫

點按滑鼠即可啟動動畫 (點按以檢視完整大小的影像)

上一個下一個