Animasi (DirectComposition)
Catatan
Untuk aplikasi di Windows 10, sebaiknya gunakan Windows. UI. KOMPOSISI API alih-alih DirectComposition. Untuk informasi selengkapnya, lihat Memodernisasi aplikasi desktop Anda menggunakan lapisan Visual.
Topik ini membahas dasar-dasar animasi Microsoft DirectComposition. Ini berisi topik-topik berikut:
- Apa itu animasi?
- Properti yang dapat dianimasikan
- Fungsi animasi
- Segmen animasi
- Kompatibilitas dengan Windows Animation Manager
- Topik terkait
Apa itu animasi?
Animasi adalah ilusi optik yang dibuat dengan cepat membuat perubahan inkremental pada visual selama periode waktu tertentu sambil menggambar ulang visual setelah setiap perubahan dilakukan. Karena penggalian ulang terjadi dengan cepat, otak melihat perubahan inkremental sebagai satu adegan yang berubah, sama seperti dalam film atau video aksi langsung.
Tabel berikut ini menjelaskan beberapa cara umum menggunakan animasi.
| Animasi | Deskripsi |
|---|---|
| Pengguliran | Gunakan animasi untuk menambahkan fitur seperti momentum emulasi fisika ke kontrol daftar gulir. |
| Transisi adegan | Gunakan animasi untuk membuat transisi adegan navigasi yang memberikan kelangsungan antar tugas dalam alur kerja. Transisi adegan navigasi menyediakan konteks yang menunjukkan kepada pengguna di mana mereka berada, di mana mereka berada, dan ke mana mereka harus pergi berikutnya. |
| Interaksi lintas jendela | Menganimasikan elemen UI dari aplikasi yang berbeda dengan cara yang memberikan persepsi kelangsungan yang mulus di antara mereka untuk membantu pengguna menyelesaikan tugas yang melibatkan peralihan dari satu aplikasi ke aplikasi lain. |
Properti yang dapat dianimasikan
Di DirectComposition, Anda menganimasikan visual dengan menerapkan animasi ke properti individual objek yang menentukan visual. Misalnya, jika Anda ingin memindahkan visual secara horizontal di seluruh layar, Anda akan menerapkan animasi ke properti OffsetX visual. Demikian pula, jika Anda ingin melakukan rotasi visual 2D animasi sederhana, Anda akan menerapkan animasi ke properti Sudut objek transformasi 2D, lalu menerapkan objek transformasi 2D ke properti Transformasi visual.
DirectComposition memungkinkan Anda menerapkan animasi ke properti objek apa pun yang mengambil nilai skalar. Anda dapat menerapkan animasi simultan ke beberapa properti dan beberapa objek.
DirectComposition menjalankan animasi pada utas terpisah. Anda dapat memulai animasi atau sekumpulan animasi dan kemudian melakukan pekerjaan lain pada utas aplikasi Anda, atau bahkan membuat utas tertidur, sementara mesin komposisi menjalankan animasi pada kecepatan bingkai yang sesuai.
Fungsi animasi
DirectComposition menganimasikan properti objek berdasarkan fungsi animasi yang Anda tentukan. Fungsi animasi adalah konstruksi yang menentukan bagaimana nilai properti objek berubah selama periode waktu tertentu. Misalnya, Anda dapat menentukan fungsi animasi yang mengubah nilai properti dari 1 menjadi 360 selama 4 detik. Kemudian, jika Anda menerapkan fungsi animasi ke properti Sudut dari objek transformasi putar 2D, lalu menerapkan objek transformasi ke properti Transformasi visual, fungsi animasi akan memutar visual dalam lingkaran penuh selama 4 detik.
Fungsi animasi diwakili oleh objek animasi yang dibuat oleh panggilan ke metode IDCompositionDevice::CreateAnimation . Anda membuat fungsi animasi dengan menggunakan metode antarmuka IDCompositionAnimation objek animasi untuk menambahkan segmen animasi, satu per satu, ke array yang menentukan fungsi animasi. Saat menambahkan segmen, Anda menentukan offset berbasis nol yang menandai waktu mulai segmen, relatif terhadap awal fungsi animasi. Segmen animasi harus ditambahkan dalam meningkatkan urutan waktu mulai. Mencoba menambahkan segmen animasi yang waktu mulainya sebelum atau sama dengan segmen sebelumnya akan gagal. Fungsi animasi dapat memiliki waktu akhir yang ditentukan, menunjukkan kapan fungsi harus menyimpulkan.
Kecuali ditentukan lain, fungsi animasi dimulai ketika Desktop Window Manager (DWM) menerima perintah untuk menjalankan animasi. Setiap segmen berjalan hingga waktu mulai segmen berikutnya tercapai. Setiap perubahan terhenti yang terjadi dalam nilai properti animasi antar segmen dianggap sebagai perubahan diskrit.
Anda menerapkan fungsi animasi ke properti dengan mengatur nilai properti ke penunjuk IDCompositionAnimation objek animasi yang mewakili fungsi animasi. Objek animasi yang sama dapat diterapkan ke beberapa properti dari objek yang sama, serta ke properti objek lain yang dibuat oleh perangkat yang sama.
Segmen animasi
Segmen animasi adalah definisi waktu mendasar dari fungsi animasi; mereka adalah primitif dari mana fungsi animasi tingkat yang lebih kompleks dan lebih tinggi dibangun. Segmen animasi dibangun dari serangkaian parameter yang menjelaskan fungsi dan waktu ketika segmen dimulai, relatif terhadap awal fungsi animasi. Untuk setiap segmen, waktu (t) berlangsung di sepanjang sumbu horizontal dan dimulai pada t = 0.
Segmen kubik
Waktu segmen kubik didefinisikan oleh polinomial kubik. Untuk input waktu tertentu (t), nilai output diberikan oleh persamaan berikut:
x(t) = at³ + bt² + ctd +
Diagram berikut menunjukkan fungsi animasi yang berisi dua segmen kubik. Segmen pertama mentransisikan nilai dari 0 menjadi 16 selama 4 detik, dan yang kedua mengubah nilai secara linier dari 16 menjadi 0 selama 4 detik berikutnya. Transisi pertama terjadi di sepanjang polinomial kubik ini:
x(t) = t³ - 6t² + 12t
dan transisi kedua terjadi di sepanjang transisi ini:
x(t) = - 4t + 16
Anda menambahkan segmen kubik ke fungsi animasi dengan menggunakan metode IDCompositionAnimation::AddCubic .
Segmen Sinusoidal
Waktu segmen sinusoidal ditentukan oleh persamaan berikut:
x(t) = BiasAmplitude + * sin(tFrequency**2*PI + Phase*PI/180.0)
Anda menambahkan segmen sinusoidal ke fungsi animasi dengan menggunakan metode IDCompositionAnimation::AddSinusoidal .
Ulangi segmen
Segmen berulang mengulangi bagian sebelumnya yang ditentukan dari fungsi animasi. Segmen pengulangan menyebabkan bagian fungsi animasi yang ditentukan mengulang tanpa batas waktu hingga segmen berikutnya ditemui atau akhir animasi yang ditentukan tercapai. Bagian sebelumnya dari animasi terbuat dari segmen lain, termasuk segmen pengulangan lainnya. Segmen berulang tidak dapat digunakan sebagai segmen pertama dalam fungsi animasi.
Diagram berikut menunjukkan fungsi animasi yang masing-masing terdiri dari dua segmen kubik berdurasi 4 detik, diikuti oleh segmen berulang yang berlangsung 12 detik. Segmen pengulangan dimulai 8 detik ke dalam animasi dan mengulangi 6 detik sebelumnya dari animasi dua kali sampai segmen akhir tercapai pada 20 detik.
Untuk menambahkan segmen pengulangan ke fungsi animasi, gunakan metode IDCompositionAnimation::AddRepeat .
Segmen akhir
Setelah membuat fungsi animasi dari segmen, Anda dapat menambahkan segmen akhir untuk menyebabkan fungsi animasi berakhir pada waktu tertentu. Jika Anda tidak menambahkan segmen akhir, segmen akhir fungsi animasi berjalan tanpa batas waktu.
Anda menambahkan segmen akhir dengan memanggil metode IDCompositionAnimation::End , menentukan offset dari awal fungsi animasi yang menunjukkan titik akhir fungsi. Offset harus lebih besar dari offset awal segmen sebelumnya. Selain itu, segmen akhir tidak dapat digunakan sebagai primitif pertama dalam fungsi animasi.
Saat Anda memanggil Akhir, Anda juga menentukan nilai akhir untuk properti yang dianimasikan. Properti diatur ke nilai akhir yang ditentukan saat titik akhir fungsi animasi tercapai.
Setelah menambahkan segmen akhir, Anda tidak dapat menambahkan segmen lain ke fungsi animasi. Artinya, semua panggilan metode pada objek animasi gagal kecuali IDCompositionAnimation::Reset. Memanggil Reset mengembalikan objek animasi untuk membersihkan status di mana fungsi animasi tidak berisi segmen, di mana Anda dapat sekali lagi menambahkan segmen.
Kompatibilitas dengan Windows Animation Manager
Windows Animation Manager (Windows Animasi) menghasilkan primitif animasi dalam format yang kompatibel dengan API DirectComposition. Ini berarti bahwa DirectComposition dapat membuat animasi berdasarkan primitif animasi yang dibuat oleh Windows Animation.
Untuk informasi selengkapnya, lihat Windows Animation Manager, metode IUIAnimationVariable2::GetCurve, dan Mengelola Animasi DirectComposition dengan Windows Animation Manager v2.
Topik terkait