Animasi gerakan alami

Artikel ini memberikan gambaran singkat tentang ruang NaturalMotionAnimation dan cara berpikir secara konseptual tentang menggunakan jenis animasi ini di UI Anda.

Membuat gerakan terasa akrab dan alami

Aplikasi hebat adalah aplikasi yang menciptakan pengalaman yang menangkap dan mempertahankan perhatian pengguna, dan membantu memandu pengguna melalui tugas. Gerakan adalah faktor pembeda utama yang memisahkan Antarmuka Pengguna dari Pengalaman Pengguna - memunculkan koneksi antara pengguna dan aplikasi yang berinteraksi dengan mereka. Semakin baik koneksi, semakin tinggi keterlibatan dan kepuasan dari pengguna akhir.

Salah satu cara gerakan dapat membantu membangun koneksi ini adalah dengan menciptakan pengalaman yang terlihat dan terasa akrab bagi pengguna. Pengguna memiliki harapan yang tidak sadar tentang bagaimana mereka memahami gerakan yang didasarkan pada pengalaman kehidupan nyata. Kita melihat bagaimana objek meluncur melintasi lantai, jatuh dari meja, saling memantul, dan berosilasi dengan pegas. Gerakan yang memanfaatkan harapan ini dengan didasarkan pada fisika dunia nyata terlihat dan terasa lebih alami di mata kita. Gerakan menjadi lebih alami dan interaktif, tetapi yang lebih penting, seluruh pengalaman menjadi lebih berkesan dan menyenangkan.

Hasil bersih adalah keterlibatan dan retensi pengguna yang lebih tinggi dengan aplikasi Anda.

Kontrol Penyeimbangan dan Dinamisme

Dalam UI tradisional, KeyFrameAnimationadalah cara yang dominan untuk menggambarkan gerakan. KeyFrames memberikan kontrol paling besar kepada desainer dan pengembang untuk menentukan awal, akhir, dan interpolasi. Meskipun ini sangat berguna dalam banyak kasus, Animasi KeyFrame tidak terlalu dinamis; gerakan tidak adaptif dan terlihat sama dalam kondisi apa pun.

Di ujung spektrum lainnya, ada simulasi yang sering terlihat di mesin game dan fisika. Pengalaman ini sering kali merupakan yang paling nyata dan dinamis yang dapat diinteraksikan pengguna - menciptakan suasana dan ketidakpastian yang dialami pengguna setiap hari. Meskipun ini membuat gerakan terasa lebih hidup dan dinamis, desainer dan pengembang memiliki kontrol yang lebih sedikit, oleh karena itu membuatnya lebih sulit untuk diintegrasikan ke dalam UI tradisional.

NaturalMotionAnimation ada untuk membantu menjembatani kesenjangan ini - memungkinkan keseimbangan kontrol untuk elemen-elemen penting dari animasi seperti awal/akhir, tetap mempertahankan gerakan yang terlihat dan terasa alami dan dinamis.

Nota

NaturalMotionAnimations tidak dimaksudkan sebagai pengganti Animasi KeyFrame – masih ada area dalam Fluent design language di mana KeyFrame direkomendasikan. NaturalMotionAnimations dimaksudkan untuk digunakan di tempat-tempat di mana gerakan diperlukan tetapi Animasi KeyFrame tidak cukup dinamis.

Menggunakan NaturalMotionAnimations

Di WinUI dan Windows App SDK, Anda memiliki akses ke pengalaman gerakan alami: animasi musim semi. Lihat Animasi pegas untuk penjelasan lebih mendalam tentang pegas.

Jenis gerakan ini dicapai dengan menggunakan *NaturalMotionAnimation* baru – jenis animasi baru yang dirancang untuk memungkinkan pengembang membangun gerakan yang terasa lebih akrab dan alami ke dalam antarmuka pengguna mereka, dengan keseimbangan antara kontrol dan dinamisme. Mereka mengekspos kemampuan berikut:

• Tentukan nilai awal dan akhir.
• Tentukan InitialVelocity dan hubungkan dengan input menggunakan InteractionTracker.
• Tentukan properti khusus gerakan (seperti DampingRatio untuk pegas.)

Rumus Umum untuk memulai:

1. Buat NaturalMotionAnimation dari Compositor menggunakan salah satu metode Buat .
2. Tentukan properti animasi.
3. Teruskan NaturalMotionAnimation sebagai parameter ke panggilan StartAnimation pada CompositionObject.
   • Atau setel ke properti Motion dari InteractionTracker InertiaModifier.

Contoh dasar menggunakan *spring NaturalMotionAnimation* untuk membuat Visual "melompat" ke lokasi X Offset yang baru.

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);