使用用戶端程式碼變更動畫 (C#)

  • 發行項

作者 ：一個是一個

下載 PDF

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 您也可以使用自訂用戶端 JavaScript 程式碼來變更動畫。

概觀

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 您也可以使用自訂用戶端 JavaScript 程式碼來變更動畫。

步驟

首先，在頁面中包含 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>

實際的動畫會由 HTML 按鈕啟動：

<input type="button" id="Button1" runat="server" value="Launch Animation" />

然後，將 新增 AnimationExtender 至頁面，並提供 ID 、 TargetControlID 屬性和強制： runat="server"

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

請注意，控制項內 AnimationExtender 沒有 <Animations> 節點。 自訂 JavaScript 程式碼可用來提供要與 控制項搭配使用的動畫。

和 的伺服器 API AnimationExtender 一樣，還無法輕鬆地將動畫指派給擴充項。 不過，擴充器確實會公開數種方法來讀取和寫入以各種事件註冊的動畫 (OnClick 、 OnLoad 等等) 。 以下是一些範例：

  • get_OnClick()
  • set_OnClick()
  • get_OnLoad()
  • set_OnLoad()
  • ...

函式的傳回值 get_*() 格式和函式的引數 set_*() 格式是 JSON 字串，提供 XML 標記的物件表示。 目前無法傳入 物件，但可以從指定的動畫讀取物件 (get_OnXXXBehavior() 方法) 。

以下是 JSON 字串 (不含分隔引號，且格式正確) 代表按鈕所觸發的動畫，但藉由調整面板大小並同時淡出它來產生動畫：

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

下列 JavaScript 程式碼會將此 JSON 描述指派給 OnClick 目前擴充器的動畫，並加以執行：

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

動畫會立即執行，而不需按一下滑鼠即可 (，而且標記很少)

動畫會立即執行，而不需按一下滑鼠 (，而且) (按一下即可檢視大小完整的影像)

上一個下一個