Menggunakan Animasi
Sementara AJAX Control
Toolkit difokuskan terutama pada penyediaan kontrol besar AJAX dan extender,
juga mencakup kerangka animasi kuat yang dapat Anda gunakan untuk menambahkan
efek visual yang mengagumkan pada halaman Anda. Walkthrough ini menjelaskan dasar-dasar menggunakan kerangka ini
untuk membuat animasi deklaratif.
Generic XML Animasi
Animasi
diimplementasikan dalam JavaScript sebagai hirarki kelas AJAX ASP.NET dan dapat
dipanggil melalui JavaScript dengan memanggil fungsi bermain Animation. Hal ini sangat berguna ketika menulis ke kelas animasi dari
kode, tetapi menulis animasi yang kompleks akhirnya menjadi memakan waktu dan
rawan kesalahan. Untuk membuatnya
sangat mudah untuk menggunakan kerangka animasi tanpa harus menulis JavaScript,
Toolkit menyediakan kemampuan untuk menyatakan animasi melalui XML markup.
Extenders dengan
dukungan animasi, seperti AnimationExtender tersebut, mengekspos berbagai acara, seperti OnClick, yang dapat dikaitkan dengan deklarasi animasi
generik XML. Dalam deklarasi ini,
Anda menentukan jenis efek animasi yang Anda ingin terjadi.Misalnya, untuk
membuat Panel dengan ID =
"MyPanel" menghilang dari
halaman saat diklik, Anda bisa menambahkan AnimationExtender seperti ini:
<AjaxToolkit: id AnimationExtender =
"MyExtender"
runat = "server" TargetControlID =
"MyPanel">
<Animations>
<OnClick>
<FadeOut Duration=".5"
Fps="20" />
</ OnClick>
</ Animasi>
</ AjaxToolkit: AnimationExtender>
Mari
kita lihat lebih dekat pada apa yang terjadi di atas XML. AnimationExtender ini digunakan untuk
menunjukkan bahwa kita ingin membuat animasi target kami kontrol dengan ID "MyPanel"
=. Bagian Animasi adalah di mana semua
animasi generik dideklarasikan. OnClick menunjukkan
bahwa ketika target diklik kami akan memainkan animasi bersarang di dalamnya. Akhirnya, fadeOut mendefinisikan animasi
spesifik yang akan dimainkan dan menetapkan nilai-nilai Durasi dan sifat Fps. Berikut contoh dalam
tindakan:
Klik saya untuk fade out!
Para acara yang
berkaitan dengan animasi bervariasi dari extender untuk extender. TheAnimationExtender memiliki acara untuk OnLoad, OnClick,
onmouseover, onmouseout, OnHoverOver, dan OnHoverOut. The UpdatePanelAnimationExtendermemiliki kegiatan untuk OnUpdating dan OnUpdated. Penting untuk dicatat bahwa
setiap peristiwa hanya dapat memiliki satu anak node XML yang terkait dengan
itu tetapi Anda dapat menggunakan menggunakan Sequence dan animasi Sejalan dengan sewenang-wenang
sarang dan animasi kelompok, yang dibahas secara rinci di bawah.
Di bawah ini adalah
contoh yang menggunakan OnHoverOver dan OnHoverOut memudarPanel masuk dan keluar ketika mouse bergerak di atasnya. Kami menggunakan fadeIn dan animasi fadeOut dan menetapkan MinimumOpacity dan sifat MaximumOpacity.
Melayanglah di atas saya
untuk memudar dalam!
Animasi masing-masing
sesuai dengan kelas JavaScript (misalnya, fadeIn dipetakan ke kelasSys.Extended.UI.Animation.FadeInAnimation). Nama animasi digunakan sebagai tag XML generik
animasi deklarasi dan sifat-sifatnya, yang sesuai dengan sifat-sifat di kelas
JavaScript, adalah atribut dari tag tersebut. Sebagai contoh, untuk mengubah ukuran elemen kita bisa
menggunakan Resize yang memiliki sifat Lebar, Tinggi, dan Unit.
Kami akan
mendeklarasikan sebagai:<Resize Width="200" Height="300"
Unit="px" />Nama animasi dan
properti adalah case insensitive dalam deklarasi animasi XML generik.Karena
kerangka animasi didasarkan pada hirarki kelas animasi, semua animasi memiliki Durasisifat (dalam detik) dan Fps (frame per detik). Semua animasi dan sifat mereka dijelaskan
dalam Referensi Animasi .
Menulis Animasi
Beberapa animasi yang
digunakan untuk agregat dan menggabungkan animasi lainnya.Contoh termasuk
Animasi Paralel yang akan menjalankan
animasi anaknya secara bersamaan dan urutan yang menjalankan animasi anaknya secara berurutan, masing-masing
menunggu untuk menyelesaikan sebelum memulai berikutnya. Untuk menggunakan animasi dalam animasi
sintaks deklarasi XML generik, kami menyertakan anak mereka animasi sebagai
elemen XML bersarang. Misalnya, untuk
memiliki pulsa elemen dan kemudian memudar serta meningkatkan ukurannya oleh
500%, kita bisa menyatakan sebagai berikut:
<Sequence>
<Pulse Duration=".1" />
<Parallel Duration=".5"
Fps="30">
<FadeOut />
<Skala ScaleFactor = "5"
Satuan = "px" Pusat = "true"
ScaleFont = "true" FontUnit =
"pt" />
</ Parallel>
</ Urutan>
Berikut
adalah apa animasi ini akan dilakukan jika terkait dengan event OnClick:
|
Meledak!
|
Sebagian besar animasi
termasuk dalam kerangka kerja yang sangat sederhana dan melakukan fungsi
tunggal. Ketika Anda
menggabungkan mereka bersama-sama menggunakan animasi seperti urutan dan paralel Anda dapat membuat efek yang sangat canggih.
Tindakan
Kerangka animasi juga
mencakup sejumlah tindakan animasi yang melakukan operasi seketika.Mereka
berbeda dari animasi biasa yang melakukan operasi dalam langkah-langkah kecil
selama periode waktu. Tindakan sering
berguna dalam animasi komposit untuk membantu dalam menciptakan efek dipoles. Contohnya termasuk EnableAction yang memungkinkan Anda untuk mengatur apakah
atau tidak sebuah elemen dapat diklik, StyleAction yang memungkinkan Anda untuk menetapkan atribut style pada
elemen target, dan HideActionyang
menyembunyikan elemen. Jika Anda ingin
mencegah Tombol pada halaman dari yang
diklik dua kali, Anda bisa menggunakan animasi berikut:
<Sequence>
<EnableAction Enabled="false"
/>
<Parallel Duration=".2">
<Resize Height="0"
Width="0" Unit="px" />
<FadeOut />
</ Parallel>
<HideAction />
<ScriptAction
Script="alert('Goodbye!');" />
</ Urutan>
Jika
terhubung ke Button, ini
akan terlihat seperti:
Animasi Target
Animasi melakukan
berbagai operasi mereka pada elemen target. Target standar elemen untuk animasi adalah kontrol itu adalah
memperluas (yaitu kontrol ditunjukkan olehTargetControlID pada tag Extender nya). Anda juga dapat
menentukan target alternatif menggunakan properti AnimationTarget. Hal ini sangat berguna ketika Anda ingin kawat
sampai AnimationExtender untuk satu kontrol, seperti Button, tetapi animasi memodifikasi kontrol lain,
seperti sebuah Panel. Sebuah animasi anak
akan memiliki target yang sama seperti animasi induknya kecuali target lain
secara eksplisit ditentukan. Berikut adalah contoh
bagaimana kita bisa tombol event OnClick menghidupkan warna
latar belakang dari kontrol lain:
<Sequence>
<EnableAction Enabled="false"
/>
<AnimationTarget Warna =
"MyContent"
Durasi = "1"
StartValue = "# FF0000"
Endvalue = "# 666666"
Properti = "gaya"
PropertyKey = "backgroundColor"
/>
<AnimationTarget Warna =
"MyContent"
Durasi = "1"
StartValue = "# FF0000"
Endvalue = "# 666666"
Properti = "gaya"
PropertyKey = "backgroundColor"
/>
<EnableAction Enabled="true"
/>
</ Urutan>
Mengklik
tombol ini akan menunjukkan animasi:
Kesimpulan
Kerangka animasi
menyediakan Anda dengan kemampuan untuk dengan mudah menambahkan interaktivitas
ke halaman web Anda yang tidak pernah sebelumnya telah tersedia. Selain menentukan animasi di markup, mereka
juga mudah digunakan dalam kode sehingga Anda dapat menambahkan transisi dan
profesional melihat efek visual untuk komponen Toolkit dan kontrol.
0 komentar:
Posting Komentar
mohon kritik dan saran
tapi jangan kejam kejam amat yak.huhu