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, memantul satu sama lain dan berosilasi dengan musim semi. 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.

Menyeimbangkan Kontrol dan Dinamisme

Dalam UI tradisional, KeyFrameAnimationadalah cara utama untuk menggambarkan gerakan. KeyFrame 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 pengalaman paling seperti kehidupan dan dinamis yang berinteraksi dengan pengguna - menciptakan suasana dan keacakan yang dilihat 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.

NaturalMotionAnimationada untuk membantu menjelang pembagian ini - memungkinkan keseimbangan kontrol untuk elemen-elemen penting dari animasi seperti awal/selesai, tetapi mempertahankan gerakan yang terlihat dan terasa alami dan dinamis.

Catatan

NaturalMotionAnimations tidak dimaksudkan sebagai pengganti Animasi KeyFrame – masih ada tempat dalam bahasa desain Fasih di mana KeyFrame direkomendasikan. NaturalMotionAnimations dimaksudkan untuk digunakan di tempat-tempat di mana gerakan diperlukan tetapi Animasi KeyFrame tidak cukup dinamis.

Menggunakan NaturalMotionAnimations

Dimulai dengan Pembaruan Fall Creators, Anda memiliki akses ke pengalaman gerakan baru: animasi musim semi. Lihat animasi Spring untuk panduan pegas yang lebih mendalam.

Jenis gerakan ini dicapai dengan menggunakan NaturalMotionAnimation baru - jenis animasi baru yang berpusat pada memungkinkan pengembang untuk membangun gerakan perasaan yang lebih akrab dan alami ke UI mereka, dengan keseimbangan kontrol dan dinamisme. Mereka mengekspos kemampuan berikut:

• Tentukan nilai awal dan akhir.
• Tentukan InitialVelocity dan ikat untuk input dengan InteractionTracker.
• Tentukan properti khusus gerakan (seperti DampingRatio untuk springs.)

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 dari CompositionObject.
   • Atau atur ke properti Gerak dari InteractionTracker InertiaModifier.

Contoh dasar menggunakan spring NaturalMotionAnimation untuk membuat Visual "spring" ke lokasi X Offset baru:

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