Mengubah Animasi Menggunakan Kode Client-Side (C#)

oleh Christian Wenz

Unduh PDF

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Animasi juga dapat diubah menggunakan kode JavaScript sisi klien kustom.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Animasi juga dapat diubah menggunakan kode JavaScript sisi klien kustom.

Langkah-langkah

Pertama-tama, sertakan ScriptManager di halaman; kemudian, pustaka AJAX ASP.NET dimuat, sehingga memungkinkan untuk menggunakan Control Toolkit:

<asp:ScriptManager ID="asm" runat="server"/>

Animasi akan diterapkan ke panel teks yang terlihat seperti ini:

<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>

Di kelas CSS terkait untuk panel, tentukan warna latar belakang yang bagus dan atur juga lebar tetap untuk panel:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Animasi aktual diluncurkan oleh tombol HTML:

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

Kemudian, tambahkan AnimationExtender ke halaman, berikan ID, TargetControlID atribut dan wajib runat="server":

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

Perhatikan bahwa tidak <Animations> ada simpul dalam AnimationExtender kontrol. Kode JavaScript kustom digunakan untuk menyediakan animasi yang akan digunakan dengan kontrol.

Seperti halnya API AnimationExtenderserver , belum ada cara mudah untuk menetapkan animasi ke extender. Namun extender memang mengekspos beberapa metode untuk membaca dan menulis animasi yang terdaftar dengan berbagai acara (OnClick, OnLoad, dan sebagainya). Berikut adalah beberapa contohnya:

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

Format nilai get_*() pengembalian fungsi dan format argumen untuk set_*() fungsi adalah string JSON, memberikan representasi objek tentang apa markup XML. Saat ini, tidak ada cara untuk meneruskan objek, tetapi dimungkinkan untuk membaca objek dari animasi tertentu (get_OnXXXBehavior() metode).

Berikut adalah string JSON (tanpa tanda kutip pembatas dan diformat dengan baik) mewakili animasi yang dipicu oleh tombol, tetapi menjiwai panel dengan mengubah ukurannya dan memudarkannya secara bersamaan:

{
 "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":[]
 }]
 }]
}

Kode JavaScript berikut menetapkan deskripsi JSON ini ke OnClick animasi extender saat ini dan menjalankannya:

<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>

Animasi segera berjalan, tanpa klik mouse (dan dengan markup yang sangat sedikit) (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya