Menambahkan Animasi ke Kontrol (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. Tutorial ini menunjukkan cara mengatur animasi seperti itu.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Tutorial ini menunjukkan cara mengatur animasi seperti itu.

Langkah-langkah

Langkah pertama adalah seperti biasa untuk menyertakan ScriptManager di halaman sehingga pustaka AJAX ASP.NET dimuat dan Control Toolkit dapat digunakan:

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

Animasi dalam skenario ini 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>

Kelas CSS terkait untuk panel menentukan warna latar belakang dan lebar:

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

Selanjutnya, kita membutuhkan AnimationExtender. Setelah memberikan ID dan yang biasa runat="server", TargetControlID atribut harus diatur ke kontrol untuk menganimasikan dalam kasus kami, panel:

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

Seluruh animasi diterapkan secara deklaratif, menggunakan sintaks XML, sayangnya saat ini tidak sepenuhnya didukung oleh IntelliSense Visual Studio. Simpul akar berada <Animations>; dalam simpul ini, beberapa peristiwa diizinkan yang menentukan kapan animasi mengambil tempat:

• OnClick (klik mouse)
• OnHoverOut (ketika mouse meninggalkan kontrol)
• OnHoverOver (saat mouse mengarah ke kontrol, menghentikan OnHoverOut animasi)
• OnLoad (ketika halaman telah dimuat)
• OnMouseOut (ketika mouse meninggalkan kontrol)
• OnMouseOver (ketika mouse mengarah ke kontrol, bukan menghentikan OnMouseOut animasi)

Kerangka kerja ini dilengkapi dengan sekumpulan animasi, masing-masing diwakili oleh elemen XML-nya sendiri. Berikut adalah pilihannya:

• <Color> (mengubah warna)
• <FadeIn> (memudar masuk)
• <FadeOut> (memudar keluar)
• <Property> (mengubah properti kontrol)
• <Pulse> (Berdetak)
• <Resize> (mengubah ukuran)
• <Scale> (mengubah ukuran secara proporsional)

Dalam contoh ini, panel akan memudar. Animasi akan memakan waktu 1,5 detik (Duration atribut), menampilkan 24 bingkai (langkah animasi) per detik (Fps atribut). Berikut adalah markup lengkap untuk AnimationExtender kontrol:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Saat Anda menjalankan skrip ini, panel ditampilkan dan memudar dalam satu setengah detik.

Panel memudar keluar (Klik untuk melihat gambar ukuran penuh)

Berikutnya