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 musim semi. Gerakan berosilasi dari musim semi sering menghasut respons emosional yang menyenangkan dan ringan dari mereka yang mengamatinya. Akibatnya, gerakan musim semi diterjemahkan dengan baik ke dalam antarmuka pengguna 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 livelier, tetapi juga dapat membantu menarik perhatian pada konten baru atau animasi saat ini. 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, springs 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 energik (Animating 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.

Menentukan 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.

• 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 DelayTime / Delay
• StopBehavior

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

Setelah menentukan properti, Anda kemudian dapat meneruskan naturalMotionAnimation spring Anda ke dalam 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 musim semi.

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 input? 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 Spring Animation 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, berikan SpringAnimation sebagai parameter ke StartAnimation.
   • Jika Anda ingin menggunakan dengan input, atur properti NaturalMotion dari InertiaModifier ke SpringAnimation.