Memicu Animasi di Kontrol lain (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. Umumnya, meluncurkan animasi dipicu oleh interaksi pengguna dengan kontrol yang sama. Namun dimungkinkan juga untuk berinteraksi dengan satu kontrol dan kemudian animasi kontrol lain.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Umumnya, meluncurkan animasi dipicu oleh interaksi pengguna dengan kontrol yang sama. Namun dimungkinkan juga untuk berinteraksi dengan satu kontrol dan kemudian animasi kontrol lain.

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>

Untuk mulai menganimasikan panel, tombol HTML digunakan. Perhatikan bahwa <input type="button" /> disukai karena <asp:Button /> kita tidak ingin postback ketika pengguna mengklik tombol itu.

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

Kemudian, tambahkan AnimationExtender ke halaman, menyediakan ID, TargetControlID atribut dan wajib runat="server". Penting untuk mengatur TargetControlID ke ID tombol (elemen yang memicu animasi), bukan ke ID panel (elemen yang dianimasikan)

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

Di dalam simpul <Animations> , tempatkan animasi seperti biasa. Untuk membuatnya mengubah panel, bukan tombol , atur AnimationTarget atribut untuk setiap elemen animasi dalam AnimationExtender. Nilai untuk AnimationTarget adalah ID panel, tentu saja. Dengan begitu, animasi terjadi dengan panel, bukan dengan tombol pemicu. Berikut adalah AnimationExtender markup untuk skenario ini:

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

Perhatikan urutan khusus di mana animasi individual muncul. Pertama-tama, tombol akan dinonaktifkan setelah animasi berjalan. Karena tidak AnimationTarget ada atribut dalam <EnableAction> elemen , animasi ini diterapkan ke kontrol asal: tombol . Dua langkah animasi berikutnya harus dilakukan secara paralel (<Parallel> elemen ). Keduanya memiliki atribut mereka AnimationTarget yang diatur ke "Panel1", sehingga meniru panel, bukan tombol .

Klik mouse pada tombol memulai animasi panel (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya