Menjalankan Beberapa Animasi Secara Bersamaan (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 secara paralel.

Gambaran Umum

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 secara paralel.

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>

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

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

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 <Parallel> elemen . Semua animasi di dalamnya <Parallel> dijalankan pada saat yang sama.

Berikut adalah markup yang mungkin untuk AnimationExtender kontrol, memudar dan mengubah ukuran panel secara bersamaan:

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

Dan memang: ketika Anda menjalankan skrip ini, panel ditampilkan, kemudian mengubah ukuran (lebih dari tiga kali lipat lebarnya dan halving tingginya) dan memudar pada saat yang sama.

Panel memudar dan mengubah ukuran (termasuk kontennya, berkat mesin penyajian browser) (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya