Menganimasikan dalam Respons Terhadap Interaksi Pengguna (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. Animasi dapat dimulai secara otomatis atau mungkin dipicu oleh interaksi pengguna, misalnya dengan mengklik dengan mouse.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Animasi dapat dimulai secara otomatis atau mungkin dipicu oleh interaksi pengguna, misalnya dengan mengklik dengan mouse.

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>

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

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

Dalam simpul <Animations> , ada lima cara untuk memulai animasi melalui interaksi pengguna (elemen yang hilang yang <OnLoad> dijalankan setelah seluruh halaman dimuat sepenuhnya):

• <OnClick> (klik mouse pada kontrol)
• <OnHoverOut> (mouse meninggalkan kontrol)
• <OnHoverOver> (mouse mengarah ke kontrol, menghentikan <OnHoverOut> animasi)
• <OnMouseOut> (mouse meninggalkan kontrol)
• <OnMouseOver> (mouse mengarah ke kontrol, bukan menghentikan <OnMouseOut> animasi)

Dalam skenario ini, <OnClick> digunakan. Ketika pengguna mengklik panel, itu diubah ukurannya dan memudar secara bersamaan.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Klik mouse memulai animasi (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya