Ini adalah tutorial 11 sebagai bagian dari seri tutorial Windows Phone. Dalam tugas ini, Anda akan membuat storyboard dalam Expression Blend untuk menganimasikan teks di spanduk setiap kali tombol ditekan.
1. Buka ruang kerja aktif ke ruang kerja animasi. Dalam Jendela menu, arahkan ke Ruang kerja dan pilih Animasi. Perhatikan bahwa ini menata ulang windows untuk memaksimalkan ruang yang tersedia untuk mengedit timeline.
2. Jika perlu, keluar dari area pengeditan template kontrol tombol. Untuk melakukan ini, klik Cakupan tombol di sebelah FancyButton (Tombol Template) elemen dalam Objek dan Garis Waktu panel untuk menampilkan pohon elemen halaman.
3. Sekarang, di dalam Objek dan Garis Waktu panel, klik Baru untuk membuat papan cerita. Ini adalah tombol yang dilabeli dengan tanda + dan terletak di sudut kanan atas panel.
4. Di dalam Buat Sumber Daya Papan Cerita dialog, atur Nama untuk AnimateBanner dan klik baik.
5. Untuk membuat bingkai kunci dalam animasi, klik BannerTextBlock elemen di pohon elemen dari Objek dan Garis Waktu panel untuk memilihnya.
6. Sekarang, klik dan seret posisi saat ini dari playhead timeline ke offset 1 kedua.
7. Selanjutnya, alihkan ke Properties panel, perluas Mengubah kategori, dan pilih Skala mengubah. X nilai properti adalah untuk -1. Transformasi ini mencerminkan elemen sepanjang sumbu horisontalnya.
9. Sekarang, ubah playhead timeline ke offset 2 detik.
10. Beralih ke Properties panel, perluas Mengubah kategori, dan pilih Skala mengubah. Ubah nilai dari X properti kembali ke 1 untuk mengembalikan elemen ke kondisi semula. Perhatikan bahwa bingkai kunci kedua muncul di timeline storyboard karena perubahan ini.
11. Untuk menguji animasi di perancang, Anda perlu menambahkan beberapa teks ke spanduk. Pertama, klik lingkaran merah di sebelah kiri AnimateBanner nama storyboard di sudut kiri atas panel untuk mematikan perekaman sementara - Anda tidak ingin teks yang ditambahkan menjadi bagian dari animasi.
12. Sekarang, klik kanan BannerTextBlock elemen pada permukaan desainer dan pilih Edit Teks. Masukkan teks yang cocok untuk spanduk dan tekan MEMASUKKAN.
13. Untuk menguji animasi, tekan Bermain tombol di atas garis waktu. Perhatikan bagaimana teks di spanduk berputar secara horizontal tentang sumbu tengahnya dan bagaimana gerakannya seragam sepanjang siklus animasi.
14. Pilih bingkai kunci pertama dengan mengklik di dalam ikon lingkaran abu-abu di timeline. Perhatikan bahwa ketika Anda memilih bingkai, pembaruan perancang memperbarui untuk menunjukkan status elemen UI saat muncul dalam bingkai itu, dalam hal ini, teks spanduk tampil dicerminkan. Sekarang, di Properties panel, di bawah Mempermudah kategori, pastikan itu EasingFungsi dipilih, buka daftar drop down untuk menampilkan daftar fungsi yang tersedia, lalu pilih Cubic Out fungsi. Fungsi pelonggaran khusus ini menyebabkan transisi untuk mengurangi laju saat mendekati bingkai kunci.
15. Ulangi prosedur pada langkah sebelumnya untuk mengkonfigurasi fungsi pelonggaran untuk bingkai kunci kedua. Kali ini pilih Cubic InOut berfungsi untuk membuat transisi dimulai pada tingkat lambat, secara bertahap mempercepat, dan akhirnya mengurangi kecepatannya saat mendekati bingkai akhir.
16. Untuk menguji efek fungsi pelonggaran pada animasi, tekan Bermain di atas garis waktu. Perhatikan bagaimana spanduk memulai rotasi pada tingkat tinggi, kemudian melambat ketika teks tampak dicerminkan, kemudian mengambil kecepatan lagi dan akhirnya melambat sekali lagi untuk kembali ke posisi semula.
17.Sekarang desain antarmuka pengguna selesai, langkah selanjutnya adalah menyalin XAML yang diperbarui kembali ke proyek utama.
- Pertama, dalam Expression Blend, klik tab XAML di tepi kanan jendela atau di Melihat menu
- Arahkan ke Tampilan Dokumen Aktif dan pilih XAML ViewIni membawa Anda ke tampilan XAML dari MainPage.xaml dokumen.
- Selanjutnya, pilih dan salin anak-anak dari root UserControl elemen ke clipboard. Ini termasuk UserControl.Resources bagian dan Kisi elemen bernamaLayoutRoot tapi tidak UserControl elemen itu sendiri.
18. Sekarang, di Visual Studio, buka MainPage.xaml dokumen dalam tampilan XAML dan ganti seluruh isi anak dari root navigasi: PhoneApplicationPage elemen dengan teks di clipboard memastikan bahwa elemen root itu sendiri tetap tidak berubah.
19. Sebagai langkah terakhir, di MainPage.xaml file, cari UserControl.Resources memulai dan mengakhiri tag dan menggantinya dengan navigasi: PhoneApplicationPage.Resources tag.
20. Tekan CTRL + S untuk menyimpan MainPage.xaml mengajukan.
21. Sejauh ini, Anda telah membuat storyboard animasi untuk teks banner, tetapi hanya ada sebagai sumber daya yang tidak terpakai dalam proyek.Untuk memutar animasi, Anda perlu memicu storyboard sebagai tanggapan atas suatu peristiwa, dalam hal ini, kapan pun Klik Saya tombol ditekan. Untuk membuka Klik pengendali event untuk tombol ini:
- Pergi ke Desain pandangan dari MainPage.xaml mengajukan
- Klik dua kali tombol pada permukaan desainer untuk membuka file kode-belakang
- Posisikan kursor pada pengendali event
22. Untuk memperbarui pengendali event untuk memainkan animasi, masukkan potongan kode berikut ke dalam ruang "tebal" segera sebelum penjepit penutup.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
