Animasi musim semi

Artikel ini menunjukkan cara menggunakan spring NaturalMotionAnimations.

Prasyarat

Di sini, kami berasumsi bahwa Anda terbiasa dengan konsep yang dibahas dalam artikel ini:

• Animasi gerakan alami

Mengapa mata air?

Springs adalah pengalaman gerakan umum yang kita semua alami di beberapa titik dalam hidup kita; mulai dari mainan slinky hingga pengalaman kelas Fisika dengan blok yang terikat pegas. Gerakan berosilasi dari musim semi sering menghasut respons emosional yang ceria dan ringan dari mereka yang mengamatinya. Akibatnya, gerakan pegas diterjemahkan dengan baik ke dalam UI aplikasi bagi mereka yang ingin menciptakan pengalaman gerakan livelier yang "memunculkan" lebih banyak kepada pengguna akhir daripada Cubic Bezier tradisional. Dalam kasus ini, gerakan musim semi tidak hanya menciptakan pengalaman gerakan yang lebih hidup, tetapi juga dapat membantu menarik perhatian pada konten baru atau yang saat ini meniru. Tergantung pada branding aplikasi atau bahasa gerakan, osilasi lebih jelas dan terlihat, tetapi dalam kasus lain lebih halus.

Menggunakan spring di UI Anda

Seperti disebutkan sebelumnya, spring dapat menjadi gerakan yang berguna untuk diintegrasikan ke dalam aplikasi Anda untuk memperkenalkan pengalaman UI yang sangat akrab dan menyenangkan. Penggunaan umum spring di UI adalah:

Deskripsi Penggunaan Spring	Contoh Visual
Membuat pengalaman gerakan "pop" dan terlihat lebih hidup. (Skala Animasi)
Membuat pengalaman gerakan terasa lebih energetik (Menganimasikan Offset)

Dalam setiap kasus ini, gerakan spring dapat dipicu baik dengan "springing to" dan berosilasi di sekitar nilai baru atau berosilasi di sekitar nilainya saat ini dengan beberapa kecepatan awal.

Mendefinisikan gerakan musim semi Anda

Anda membuat pengalaman musim semi dengan menggunakan API NaturalMotionAnimation. Secara khusus, Anda membuat SpringNaturalMotionAnimation dengan menggunakan metode Create* dari Compositor. Anda kemudian dapat menentukan properti gerakan berikut:

• DampingRatio – mengekspresikan tingkat kelembapan gerakan musim semi yang digunakan dalam animasi.

Nilai Rasio Peredam	Deskripsi
DampingRatio = 0	Undamped - musim semi akan berosilasi untuk waktu yang lama
0 < DampingRatio < 1	Underdamped - musim semi akan berosilasi dari sedikit hingga banyak.
DampingRatio = 1	Criticallydamped – musim semi tidak akan melakukan osilasi.
DampingRation > 1	Overdamped - musim semi akan dengan cepat mencapai tujuannya dengan deselerasi mendadak dan tidak ada osilasi

• Periode – waktu yang dibutuhkan musim semi untuk melakukan osilasi tunggal.
• Nilai Akhir /Awal – posisi awal dan akhir gerakan musim semi yang ditentukan (jika tidak ditentukan, nilai awal dan/atau nilai akhir akan menjadi nilai saat ini).
• Kecepatan Awal – kecepatan awal terprogram untuk gerakan.

Anda juga dapat menentukan sekumpulan properti gerakan yang sama dengan KeyFrameAnimations:

• Perilaku TundaWaktu/Penundaan
• StopBehavior

Dalam kasus umum animasi Offset dan Skala/Ukuran, nilai berikut direkomendasikan oleh tim Desain Windows untuk DampingRatio dan Periode untuk berbagai jenis spring:

Properti	Musim Semi Normal	Musim Semi Basah	Musim Semi Kurang Lembap
Offset	Rasio Redaman = 0,8 Periode = 50 md	Rasio Redaman = 0,85 Periode = 50 md	Rasio Peredam = 0,65 Periode = 60 mdtk
Skala/Ukuran	Rasio Redaman = 0,7 Periode = 50 md	Rasio Redaman = 0,8 Periode = 50 md	Rasio Redaman = 0,6 Periode = 60 mdtk

Setelah Anda menentukan properti, Anda kemudian dapat meneruskan spring NaturalMotionAnimation Anda ke metode StartAnimation dari CompositionObject atau properti Gerakan dari InteractionTracker InertiaModifier.

Contoh

Dalam contoh ini, Anda membuat pengalaman antarmuka pengguna navigasi dan kanvas di mana, ketika pengguna mengklik tombol perluas, panel navigasi dianimasikan dengan gerakan osilasi yang pedas.

Mulailah dengan menentukan animasi spring dalam peristiwa yang diklik saat panel navigasi muncul. Anda kemudian menentukan properti animasi, menggunakan fitur InitialValueExpression untuk menggunakan Ekspresi untuk menentukan FinalValue. Anda juga melacak apakah panel dibuka atau tidak dan, saat siap, memulai animasi.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
 _springAnimation = _compositor.CreateSpringScalarAnimation();
 _springAnimation.DampingRatio = 0.75f;
 _springAnimation.Period = TimeSpan.FromSeconds(0.5);

 if (!_expanded)
 {
 _expanded = true;
 _propSet.InsertBoolean("expanded", true);
 _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
 } else
 {
 _expanded = false;
 _propSet.InsertBoolean("expanded", false);
_springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
 }
 _naviPane.StartAnimation("Offset.X", _springAnimation);
}

Sekarang bagaimana jika Anda ingin mengikat gerakan ini untuk masukan? Jadi jika pengguna akhir menggesek keluar, panel keluar dengan gerakan Spring? Lebih penting lagi, jika pengguna menggesek lebih keras atau lebih cepat, gerakan beradaptasi berdasarkan kecepatan dari pengguna akhir.

Untuk melakukan ini, Anda dapat mengambil Animasi Spring kami yang sama dan meneruskannya ke InertiaModifier dengan InteractionTracker. Untuk informasi selengkapnya tentang InputAnimations dan InteractionTracker, lihat Pengalaman manipulasi kustom dengan InteractionTracker. Kami akan berasumsi untuk contoh kode ini, Anda telah menyiapkan InteractionTracker dan VisualInteractionSource Anda. Kami akan fokus pada pembuatan InertiaModifiers yang akan mengambil NaturalMotionAnimation, dalam hal ini musim semi.

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

 // Define the InertiaModifer to manage the close motion
 var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

 _tracker.ConfigurePositionXInertiaModifiers(new 
InteractionTrackerInertiaNaturalMotion[] { openMotionModifer, closeMotionModifier});

 // Take output of InteractionTracker and assign to the pane
 var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
 exp.SetReferenceParameter("tracker", _tracker);
 ElementCompositionPreview.GetElementVisual(pageNavigation).
StartAnimation("Translation.X", exp);
}

Sekarang Anda memiliki animasi spring terprogram dan berbasis input di antarmuka pengguna Anda!

Singkatnya, langkah-langkah untuk menggunakan animasi spring di aplikasi Anda:

1. Buat SpringAnimation Anda dari Compositor Anda.
2. Tentukan properti SpringAnimation jika Anda menginginkan nilai non-default:
   • DampingRatio
   • Periode
   • Nilai Akhir
   • Nilai Awal
   • Kecepatan Awal
3. Tetapkan ke target.
   • Jika Anda menjiwai properti CompositionObject, teruskan SpringAnimation sebagai parameter ke StartAnimation.
   • Jika Anda ingin menggunakan dengan input, atur properti NaturalMotion dari InertiaModifier ke SpringAnimation.