Menambahkan Animasi ke Kontrol (VB)

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 menyiapkan 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 menyiapkan 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 perlu AnimationExtender. Setelah menyediakan 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 mengarahkan kursor ke kontrol, menghentikan OnHoverOut animasi)
• OnLoad (ketika halaman telah dimuat)
• OnMouseOut (ketika mouse meninggalkan kontrol)
• OnMouseOver (ketika mouse mengarahkan kursor ke OnMouseOut kontrol, tidak menghentikan 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> (Denyut nadi)
• <Resize> (mengubah ukuran)
• <Scale> (secara proporsional mengubah ukuran)

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>

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

Panel memudar keluar (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya