Animasi musim semi

Artikel ini memperlihatkan cara menggunakan spring NaturalMotionAnimations di WinUI.

Prasyarat

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

• Animasi gerakan alami

Mengapa mata air?

Pegas adalah pengalaman gerakan umum yang pernah kita alami pada suatu waktu dalam kehidupan kita; mulai dari mainan slinky hingga pengalaman kelas Fisika dengan blok yang terikat pegas. Gerakan pegas yang berosilasi sering menimbulkan perasaan riang dan menyenangkan dari mereka yang mengamatinya. Akibatnya, gerakan pegas diterjemahkan dengan baik ke dalam antarmuka pengguna aplikasi bagi mereka yang ingin menciptakan pengalaman gerakan yang lebih hidup dan lebih menarik perhatian kepada pengguna akhir daripada kurva Bezier Kubik tradisional. Dalam kasus ini, gerakan pegas tidak hanya menciptakan pengalaman gerakan yang lebih hidup, tetapi juga dapat membantu menarik perhatian pada konten baru atau animasi yang sedang berlangsung. Tergantung pada branding aplikasi atau bahasa gerakan, osilasi lebih jelas dan terlihat, tetapi dalam kasus lain lebih halus.

Menggunakan Spring dalam antarmuka pengguna Anda

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

Deskripsi Penggunaan Spring	Contoh Visual
Membuat pengalaman pergerakan "pop" dan tampak lebih dinamis. Menganimasikan Skala
Menghadirkan pengalaman gerakan yang terasa lebih energik secara halus (Animating Offset)

Dalam setiap kasus ini, gerakan pegas dapat dipicu baik dengan "melompat ke" dan berosilasi di sekitar nilai baru atau berosilasi di sekitar nilai saat ini dengan kecepatan awal tertentu.

Menentukan gerakan pegas 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 redaman gerak pegas yang digunakan dalam animasi.

Nilai Rasio Peredam	Deskripsi
DampingRatio = 0	Tak teredam – pegas akan berosilasi untuk waktu yang lama
0 < DampingRatio < 1	Underdamped - pegas akan berosilasi dengan intensitas yang bervariasi.
DampingRatio = 1	Diredam kritis - pegas tidak akan berosilasi.
DampingRatio > 1	Overdamped - musim semi akan dengan cepat mencapai tujuannya dengan peredaman mendadak dan tanpa osilasi

• Periode – waktu yang dibutuhkan pegas untuk melakukan satu osilasi.
• 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 Waktu Tunda / Tunda
• StopBehavior

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

Harta benda	Musim Semi Normal	Musim Semi Basah	Musim Semi Yang Kurang Diredaksi
Offset	Rasio Peredam = 0,8 Periode = 50 milidetik	Rasio Peredam = 0,85 Periode = 50 milidetik	Rasio Peredaman = 0,65 Periode = 60 ms
Skala/Ukuran	Rasio Redaman = 0,7 Periode = 50 milidetik	Rasio Peredam = 0,8 Periode = 50 milidetik	Rasio Peredam = 0,6 Periode = 60 ms

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

Example

Dalam contoh ini, Anda membuat pengalaman antarmuka pengguna untuk navigasi yang menyertakan unsur kanvas, di mana ketika pengguna mengklik tombol perluas, panel navigasi dianimasikan keluar dengan gerakan mengayun-ayun.

Mulailah dengan menentukan animasi spring dalam event yang diklik ketika 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 menghubungkan gerakan ini ke input? Jadi jika pengguna akhir menggesekkan layar ke luar, panel keluar dengan gerakan melenting? 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 yang sama dengan yang kami gunakan 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 were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

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

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

    // Take the InteractionTracker output and assign it 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 berdasarkan Compositor Anda.
2. Tentukan properti SpringAnimation jika Anda menginginkan nilai non-default:
   • DampingRatio
   • Periode
   • Nilai Akhir
   • Nilai Awal
   • Kecepatan Awal
3. Tetapkan ke sasaran
   • Jika Anda menganimasikan properti CompositionObject, masukkan SpringAnimation sebagai parameter untuk StartAnimation.
   • Jika Anda ingin menggunakan dengan input, atur properti NaturalMotion dari InertiaModifier ke SpringAnimation.