Menjalankan 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. Eksekusi animasi juga dapat dipicu 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. Eksekusi animasi juga dapat dipicu 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 juga atur lebar tetap untuk panel:

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

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

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

Dalam simpul <Animations> , gunakan <OnClick> untuk menjalankan animasi setelah pengguna mengklik panel. Tambahkan dua animasi yang akan dijalankan secara paralel:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Demi demonstrasi, animasi ini (dan animasi lain yang dibuat menggunakan Control Toolkit) dijalankan menggunakan kode JavaScript, setelah halaman berjalan. Pertama-tama kita perlu akses ke AnimationExtender kontrol. Pustaka AJAX ASP.NET menyediakan $find() fungsi untuk tugas ini:

var ae = $find("ae");

Kontrol AnimationExtender mengekspos API yang kaya, termasuk metode dengan nama yang identik dengan penanganan aktivitas yang digunakan dalam markup XML: OnClick(), OnLoad(), dan sebagainya. Misalnya, panggilan OnClick() metode menjalankan animasi dalam <OnClick> elemen AnimationExtender kontrol:

ae.OnClick();

Berikut adalah kode JavaScript sisi klien lengkap yang meniru klik pada panel setelah halaman dimuat sepenuhnya perhatikan bahwa pageLoad() nama fungsi digunakan yang dipanggil oleh ASP.NET AJAX setelah halaman dan semua pustaka JavaScript yang disertakan telah dimuat.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Animasi segera berjalan, tanpa klik mouse (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya