Animasi Tergantung Kondisi (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. Apakah animasi dijalankan atau tidak juga dapat bergantung pada kondisi dalam bentuk beberapa kode JavaScript.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Apakah animasi dijalankan atau tidak juga dapat bergantung pada kondisi dalam bentuk beberapa kode JavaScript.

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. Alih-alih salah satu animasi biasa, elemen ini <Condition> mulai dimainkan. Kode JavaScript yang disediakan sebagai nilai ConditionScript atribut dijalankan saat runtime. Jika dievaluasi ke true, animasi dijalankan, jika tidak. Markup berikut menyediakan dua animasi, masing-masing dijalankan dalam 50% kasus secara acak. Karena mungkin hanya ada satu animasi dalam <OnLoad>, kedua <Condition> animasi digabungkan menggunakan <Sequence> elemen :

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
  <Animations>
    <OnLoad>
      <Sequence>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <FadeOut Duration="1.5" Fps="24" />
        </Condition>
      </Sequence>
    </OnLoad>
  </Animations>
</ajaxToolkit:AnimationExtender>

Perhatikan bahwa tanda kurang dari (<) dalam ConditionScript atribut harus diloloskan (). Saat Anda menjalankan skrip ini, tidak ada animasi yang berjalan, atau salah satu dari keduanya, atau keduanya.

Panel memudar tanpa mengubah ukuran, sehingga animasi kedua berjalan, yang pertama tidak (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya