Gambaran Umum Papan Cerita

Gambaran umum ini berfokus pada bagaimana transisi dan papan cerita digunakan dalam Animasi Windows. Untuk gambaran umum komponen Animasi Windows, lihat Gambaran Umum Animasi Windows.

Topik ini berisi bagian berikut:

• Transisi
  • Pustaka Transisi
  • Transisi Kustom
• Papan cerita
  • Membangun Papan Cerita Sederhana
  • Menggunakan Durasi Context-Sensitive
  • Membangun Papan Cerita yang Lebih Kompleks
  • Menggunakan Keyframe
  • Menahan Variabel
  • Menjadwalkan Papan-cerita
• Topik terkait

Transisi

Transisi menentukan bagaimana satu variabel animasi berubah selama interval waktu tertentu. Animasi Windows mencakup pustaka transisi umum yang dapat diterapkan pengembang ke satu atau beberapa variabel animasi. Berbagai jenis transisi memiliki set parameter yang berbeda, yang dapat mencakup nilai variabel ketika transisi selesai, durasi transisi, atau jumlah yang unik ke fungsi matematika yang mendasar, seperti akselerasi atau rentang osilasi.

Semua transisi berbagi dua parameter implisit: nilai awal dan kecepatan awal (kelopakkan) fungsi matematika. Ini dapat ditentukan secara eksplisit oleh aplikasi, tetapi biasanya diatur oleh manajer animasi ke nilai dan kecepatan variabel animasi ketika transisi dimulai.

• Pustaka Transisi
• Transisi Kustom

Pustaka Transisi

Transisi berikut saat ini disediakan oleh pustaka transisi. Jika aplikasi memerlukan efek yang tidak dapat ditentukan dengan menggunakan pustaka transisi, pengembang dapat membuat jenis transisi lain dengan menerapkan interpolator kustom untuk aplikasi, atau menggunakan pustaka transisi dari pihak ketiga.

Nama Transisi	Deskripsi
akselerasi-decelerate	Variabel animasi mempercepat ke atas lalu melambat selama durasi tertentu.
konstanta	Variabel animasi tetap pada nilai awalnya selama transisi.
Kubik	Variabel animasi berubah dari nilai awalnya menjadi nilai akhir yang ditentukan, dengan kecepatan akhir yang ditentukan, selama durasi tertentu.
Diskrit	Variabel animasi tetap pada nilai awalnya untuk waktu penundaan yang ditentukan, lalu beralih secara instan ke nilai akhir yang ditentukan dan tetap pada nilai tersebut untuk waktu penahanan tertentu.
Seketika	Variabel animasi berubah langsung dari nilainya saat ini menjadi nilai akhir yang ditentukan.
linier	Variabel animasi beralih secara linier dari nilai awalnya ke nilai akhir yang ditentukan selama durasi tertentu.
linear dari kecepatan	Variabel animasi beralih secara linier dari nilai awalnya ke nilai akhir yang ditentukan dengan kecepatan yang ditentukan.
parabolik dari akselerasi	Variabel animasi beralih dari nilai awalnya ke nilai akhir yang ditentukan, dengan kecepatan akhir yang ditentukan, mengubah kecepatannya dengan akselerasi yang ditentukan.
Pembalikan	Variabel mengubah arah selama durasi tertentu. Nilai akhir akan sama dengan nilai awal dan kecepatan akhir akan menjadi negatif dari kecepatan awal.
sinusoidal dari rentang	Variabel berosilasi dalam rentang nilai tertentu, dengan periode osilasi tertentu, selama durasi tertentu.
sinusoidal dari kecepatan	Variabel berosilasi dengan periode osilasi tertentu, selama durasi tertentu. Amplitude osilasi ditentukan oleh kecepatan awal variabel.
halus berhenti	Variabel animasi datang ke perhentian halus pada nilai akhir yang ditentukan, dalam durasi waktu maksimum.

Tabel berikut berisi ilustrasi untuk setiap transisi ini.

Ilustrasi

Transisi Kustom

Interpolator mendefinisikan fungsi matematika yang menentukan bagaimana variabel animasi berubah dari waktu ke waktu saat berkembang dari nilai awalnya menjadi nilai akhir. Setiap transisi dalam pustaka transisi memiliki objek interpolator terkait yang disediakan oleh sistem dan mengimplementasikan fungsi interpolator. Jika aplikasi memerlukan efek yang tidak dapat ditentukan menggunakan pustaka transisi, aplikasi dapat menerapkan satu atau beberapa transisi kustom dengan menerapkan objek interpolator untuk setiap transisi baru. Objek interpolator tidak dapat digunakan langsung oleh aplikasi dan sebaliknya harus dibungkus dalam transisi terkait. Pabrik transisi digunakan untuk menghasilkan transisi dari objek interpolator. Lihat IUIAnimationInterpolator dan IUIAnimationTransitionFactory untuk detail selengkapnya.

Perhatikan bahwa sebagian besar aplikasi akan memiliki semua transisi yang mereka butuhkan dengan menggunakan pustaka transisi, dan oleh karena itu tidak perlu menerapkan interpolator.

Papan cerita

Papan cerita adalah kumpulan transisi yang diterapkan ke satu atau beberapa variabel animasi dari waktu ke waktu. Transisi dalam papan cerita dijamin akan tetap disinkronkan relatif satu sama lain, dan papan cerita dijadwalkan atau dibatalkan sebagai unit. Setelah membuat transisi yang diinginkan, aplikasi membuat papan cerita menggunakan manajer animasi, menambahkan transisi ke papan cerita, mengonfigurasi papan cerita dengan tepat, dan menjadwalkannya untuk diputar sesegera mungkin. Manajer animasi menentukan waktu mulai aktual papan cerita, karena mungkin ada pertikaian dengan papan cerita lain yang saat ini menganimasikan variabel yang sama.

Durasi keseluruhan papan cerita tergantung pada durasi transisi dalam papan cerita. Durasi transisi tidak perlu diperbaiki; dapat ditentukan oleh nilai dan kecepatan variabel animasi ketika transisi dimulai. Jadi, durasi papan cerita juga dapat bergantung pada status variabel yang dianimasikannya.

Contoh berikut mengasumsikan bahwa manajer animasi, pustaka transisi, dan timer telah dibuat. Untuk informasi selengkapnya, lihat Membuat Objek Animasi Utama. Contohnya juga mengasumsikan bahwa aplikasi telah membuat tiga variabel animasi (X, Y dan Z) dengan menggunakan metode IUIAnimationManager::CreateAnimationVariable , dan lima transisi (T1, T2, T3, T4, dan T5) dengan menggunakan salah satu metode antarmuka IUIAnimationTransitionLibrary .

• Membangun Papan Cerita Sederhana
• Menggunakan Durasi Context-Sensitive
• Membangun Papan Cerita yang Lebih Kompleks
• Menggunakan Keyframe
• Menahan Variabel
• Menjadwalkan Papan-cerita

Membangun Papan Cerita Sederhana

Untuk membuat papan cerita sederhana, gunakan metode IUIAnimationManager::CreateStoryboard untuk membuat papan cerita baru, metode IUIAnimationTransitionLibrary::CreateLinearTransition untuk membuat transisi linier, T1, dan metode IUIAnimationStoryboard::AddTransition untuk menerapkan transisi T1 ke variabel X dan menambahkan transisi yang dihasilkan ke papan cerita.

Proses ini menghasilkan papan cerita sederhana, seperti yang ditunjukkan pada gambar berikut. Papan cerita berisi satu transisi, T1, sehingga nilai variabel X berubah secara linier selama durasi waktu tetap.

Perhatikan bahwa untuk skenario sederhana seperti itu, opsi alternatif adalah menggunakan metode IUIAnimationManager::ScheduleTransition .

Menggunakan Durasi Context-Sensitive

Meskipun beberapa transisi memiliki durasi tetap, durasi orang lain tergantung pada nilai awal atau kecepatan variabel animasi saat transisi dimulai. Misalnya, metode IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed membuat transisi dengan durasi yang sebanding dengan perbedaan antara nilai awal variabel animasi dan nilai akhir yang ditentukan. Dalam ilustrasi ini, dan ilustrasi yang tersisa, transisi tersebut dengan durasi arbitrer ditampilkan dengan tanda tanya (?), dan durasi aktualnya ditentukan saat papan cerita diputar.

Membangun Papan Cerita yang Lebih Kompleks

Setelah membuat papan cerita dan menambahkan satu transisi, T1, Anda dapat menambahkan transisi kedua untuk variabel X dengan memanggil metode IUIAnimationStoryboard::AddTransition lagi, tetapi dengan T2 alih-alih T1.

Dengan asumsi bahwa transisi T2 memiliki durasi yang sensitif terhadap konteks, papan cerita sekarang berisi dua transisi back-to-back dari durasi arbitrer yang memengaruhi variabel X.

Memanggil AddTransition lagi dengan variabel Y dan transisi T3 menambahkan transisi ketiga di awal papan cerita. Tergantung pada nilai X dan Y ketika papan cerita diputar, T3 dapat berakhir setelah T1 atau bahkan setelah T2.

Menggunakan Keyframe

Untuk menambahkan transisi pada offset dari awal papan cerita, Anda harus terlebih dahulu menambahkan keyframe. Keyframe mewakili instans tepat waktu dan sendiri tidak berpengaruh pada perilaku papan cerita. Setiap papan cerita memiliki keyframe implisit yang mewakili awal papan cerita, UI_ANIMATION_KEYFRAME_STORYBOARD_START; Anda dapat menambahkan keyframe baru pada offset sejak awal dengan memanggil metode IUIAnimationStoryboard::AddKeyframeAtOffset dengan UI_ANIMATION_KEYFRAME_STORYBOARD_START.

Offset tempat Anda menambahkan keyframe selalu relatif terhadap keyframe lain. Diagram berikut menunjukkan hasil penambahan keyframe1 dan transisi T4, yang diterapkan ke variabel Z, diselaraskan dengan keyframe1, dan dibuat dengan durasi tetap. Tentu saja, karena durasi transisi lain belum diketahui, T4 mungkin bukan transisi terakhir yang selesai.

Keyframe juga dapat ditempatkan di akhir transisi, menggunakan metode IUIAnimationStoryboard::AddKeyframeAfterTransition . Diagram berikut menunjukkan hasil penambahan keyframe2 setelah T1 dan keyframe3 setelah T2.

Karena durasi T1 dan T2 tidak diketahui sampai papan cerita diputar, offset keyframe2 dan keyframe3 juga tidak ditentukan sampai saat itu. Akibatnya, keyframe2 dan bahkan keyframe3 dapat terjadi lebih awal dari keyframe1.

Awal dan akhir transisi dapat diselaraskan dengan keyframe dengan menggunakan metode IUIAnimationStoryboard::AddTransitionBetweenKeyframes . Diagram berikut menunjukkan hasil penambahan transisi kelima, T5, pada variabel Y, antara keyframe2 dan keyframe3. Ini mengubah durasi T5, membuatnya lebih panjang atau lebih pendek tergantung pada offset relatif keyframe2 dan keyframe3.

Variabel Holding

Jika T4 berakhir setelah T2 dan T5, papan cerita berhenti meniru variabel X dan Y, membuatnya tersedia untuk papan cerita lain untuk dianimasikan. Namun, aplikasi dapat memanggil metode IUIAnimationStoryboard::HoldVariable untuk meminta agar papan cerita menyimpan beberapa atau semua variabel yang dianimasikan pada nilai akhir mereka sampai papan cerita selesai. Diagram berikut menunjukkan hasil penahanan X dan Z saat T4 selesai terakhir. Perhatikan bahwa papan cerita memegang X pada nilai akhirnya sampai papan cerita selesai. Penahanan tidak berpengaruh pada Z karena papan cerita berakhir ketika T4 selesai.

Meskipun Y tidak dipegang oleh papan cerita ini, nilainya tidak berubah setelah T5 selesai kecuali papan cerita lain menghidupkannya. Karena Y tidak ditahan, papan cerita lainnya, terlepas dari prioritas, dapat menghidupkan Y setelah T5 selesai. Sebaliknya, karena X ditahan, papan cerita berprioritas lebih rendah tidak dapat menganimasikan X sampai papan cerita ini selesai.

Semua ilustrasi ini telah mengasumsikan serangkaian nilai saat ini arbitrer untuk variabel ketika papan cerita mulai diputar. Jika nilai lain ditemui, durasi transisi sensitif konteks cenderung berbeda, seperti yang ditunjukkan dalam ilustrasi berikut.

Dalam skenario ini, T5 dimulai sebelum T3 selesai, dan oleh karena itu T3 dipangkas. Karena T4 selesai lebih awal dari T2 dan T5, nilai Z ditahan hingga akhir papan cerita. Secara umum, nilai dan kecepatan variabel ketika papan cerita mulai diputar dapat memengaruhi urutan keyframe dan panjang dan bentuk papan cerita secara keseluruhan.

Menjadwalkan Papan-cerita

Saat menjadwalkan papan cerita, waktu mulainya ditentukan oleh kerangkanya dan kerangka papan cerita yang saat ini ada dalam jadwal. Secara khusus, saat-saat pertama dan terakhir ketika papan cerita menganimasikan setiap variabel individu menentukan apakah dan kapan dua papan cerita bertabrakan, tetapi detail internal transisi di dalamnya tidak penting.

Ilustrasi berikut menunjukkan kerangka papan cerita dengan lima transisi yang menanimasikan tiga variabel.

Landasan platform Animasi Windows adalah dukungannya untuk membiarkan satu animasi selesai sebelum animasi lain dimulai, bila perlu. Meskipun ini menghilangkan banyak masalah logis, ini juga memperkenalkan latensi arbitrer di UI. Untuk mengatasi hal ini, aplikasi dapat menentukan penundaan terpanjang yang dapat diterima untuk papan cerita untuk memulai, menggunakan metode IUIAnimationStoryboard::SetLongestAcceptableDelay , dan manajer animasi menggunakan informasi ini untuk menjadwalkan papan cerita sebelum periode latensi yang ditentukan berlalu. Ketika papan cerita dijadwalkan, manajer animasi menentukan apakah papan cerita lain harus terlebih dahulu dibatalkan, dipangkas, disimpulkan, dan/atau dikompresi.

Aplikasi dapat mendaftarkan handler yang akan dipanggil ketika status papan cerita berubah. Ini memungkinkan aplikasi untuk merespons ketika papan cerita mulai diputar, berjalan hingga selesai, dihapus sepenuhnya dari jadwal, atau dicegah selesai karena gangguan oleh papan cerita prioritas yang lebih tinggi. Untuk mengidentifikasi papan cerita yang diteruskan ke penanganan aktivitas papan cerita (atau perbandingan prioritas), aplikasi dapat menggunakan metode IUIAnimationStoryboard::SetTag untuk menerapkan tag ke papan cerita, mirip dengan yang dapat digunakan untuk mengidentifikasi variabel. Seperti halnya penggunaan kembali papan cerita, pengembang harus berhati-hati saat menggunakan tag untuk mengidentifikasi papan cerita, dan pastikan bahwa ambiguitas tidak muncul ketika tindakan pengguna mengakibatkan banyak papan cerita diantrekan.

Contoh berikut menunjukkan dua variasi upaya untuk menjadwalkan papan cerita yang dibangun di bagian sebelumnya dari topik ini.

Dalam skenario ini, enam papan cerita, A hingga F, telah dijadwalkan untuk menganimasikan variabel W, X, Y dan Z, tetapi hanya A dan B yang mulai bermain. Papan cerita baru, berlabel G, memiliki penundaan terpanjang yang dapat diterima diatur ke durasi yang ditunjukkan dalam ilustrasi berikut.

Aplikasi ini telah mendaftarkan perbandingan prioritas yang mencakup logika berikut:

• G hanya dapat membatalkan C dan E, dan hanya untuk mencegah kegagalan.
• G hanya dapat memangkas A, C, E dan F, dan hanya untuk mencegah kegagalan.
• Papan cerita apa pun dapat memadatkan papan cerita lainnya (pemadatan selalu dilakukan hanya untuk mencegah kegagalan).

Catatan

Kualifikasi "hanya untuk mencegah kegagalan" berarti bahwa perbandingan prioritas terdaftar mengembalikan S_OK hanya ketika parameter priorityEffectUI_ANIMATION_PRIORITY_EFFECT_FAILURE. Lihat metode IUIAnimationPriorityComparison::HasPriority untuk detailnya.

Untuk memulai G sebelum penundaan terlama yang dapat diterima berlalu, manajer animasi harus melakukan hal berikut:

• Pangkas F
• Batalkan E

Ketika E dibatalkan, D dan F terungkap dan kembali ke kerangka aslinya:

Manajer animasi tidak perlu membatalkan atau memangkas C untuk menjadwalkan sebelum penundaan terpanjang yang dapat diterima telah berlalu, sehingga rapat C dan G menentukan kapan G dimulai.

Setelah G berhasil dijadwalkan, durasi transisinya dapat ditentukan, dan sisa kerangkanya diketahui. Namun, kerangka dapat berubah jika papan cerita lain kemudian dihapus dari jadwal.

Sebagai contoh kedua, pertimbangkan skenario seperti itu di atas, tetapi dengan penundaan terpanjang yang dapat diterima yang lebih pendek ditentukan untuk G.

Dalam hal ini, tindakan berikut diambil:

• Pangkas F
• Batalkan E
• Batalkan C

Selain itu, manajer animasi harus memadatkan D dengan jumlah yang ditunjukkan untuk mengaktifkan G untuk memulai setelah penundaan terpanjang yang dapat diterima, dan tidak kemudian.

Untuk mempertahankan waktu relatif mereka, A, B, dan F juga dikompresi.

Namun, papan cerita pada variabel yang tidak terkait (tidak ditampilkan) tidak akan dikompresi.

Sekali lagi, kerangka G sekarang diketahui dan berbeda dari hasil dalam skenario pertama karena variabel memiliki nilai yang berbeda ketika G dimulai.

Topik terkait

IUIAnimationManager

Perbandingan IUIAnimationPriority

IUIAnimationStoryboard

IUIAnimationTransitionLibrary