Mengeksekusi Beberapa Animasi satu sama 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. Ini memungkinkan untuk menjalankan beberapa animasi satu demi satu.

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Ini memungkinkan untuk menjalankan beberapa animasi satu demi satu.

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">

Di dalam simpul <Animations> , gunakan <OnLoad> untuk menjalankan animasi setelah halaman dimuat sepenuhnya. Umumnya, <OnLoad> hanya menerima satu animasi. Kerangka kerja Animasi memungkinkan Anda menggabungkan beberapa animasi menjadi satu menggunakan <Sequence> elemen . Semua animasi di dalam <Sequence> dijalankan satu demi satu. Berikut adalah markup yang mungkin untuk AnimationExtender kontrol, pertama-tama membuat panel lebih lebar dan kemudian mengurangi tingginya:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Ketika Anda menjalankan skrip ini, panel pertama-tama menjadi lebih lebar dan kemudian lebih kecil.

Pertama lebar ditingkatkan (Klik untuk melihat gambar ukuran penuh)

Kemudian tinggi dikurangi (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya