Animasi berbasis relasi

  • Artikel

Artikel ini memberikan gambaran singkat tentang cara membuat animasi berbasis relasi menggunakan ExpressionAnimations Komposisi.

Pengalaman Berbasis Hubungan Dinamis

Saat membangun pengalaman gerakan dalam aplikasi, ada kalanya gerakan tidak berbasis waktu, melainkan bergantung pada properti pada objek lain. KeyFrameAnimations tidak dapat mengekspresikan jenis pengalaman gerakan ini dengan sangat mudah. Dalam instans spesifik ini, gerakan tidak perlu lagi diskrit dan telah ditentukan sebelumnya. Sebaliknya, gerakan dapat beradaptasi secara dinamis berdasarkan hubungannya dengan properti objek lainnya. Misalnya, Anda dapat menganimasikan opasitas objek berdasarkan posisi horizontalnya. Contoh lain termasuk pengalaman gerakan seperti Header Sticky dan Parallax.

Jenis pengalaman gerakan ini memungkinkan Anda membuat UI yang terasa lebih terhubung, alih-alih merasa tunggal dan independen. Bagi pengguna, ini memberikan kesan pengalaman UI dinamis.

Mengorbit lingkaran

Tampilan daftar dengan parallax

Menggunakan ExpressionAnimations

Untuk membuat pengalaman gerakan berbasis relasi, Anda menggunakan jenis ExpressionAnimation. ExpressionAnimations (atau Ekspresi singkatnya), adalah jenis animasi baru yang memungkinkan Anda mengekspresikan hubungan matematika – hubungan yang digunakan sistem untuk menghitung nilai properti animasi setiap bingkai. Dengan cara lain, Ekspresi hanyalah persamaan matematika yang menentukan nilai yang diinginkan dari properti animasi per bingkai. Ekspresi adalah komponen yang sangat serbaguna yang dapat digunakan di berbagai skenario, termasuk:

Saat bekerja dengan ExpressionAnimations, ada beberapa hal yang layak disebutkan di depan:

  • Never Ending - tidak seperti saudara kandung KeyFrameAnimation-nya, Ekspresi tidak memiliki durasi terbatas. Karena Ekspresi adalah hubungan matematika, ekspresi adalah animasi yang terus -menerus "berjalan". Anda memiliki opsi untuk menghentikan animasi ini jika Anda memilih.
  • Berjalan, tetapi tidak selalu mengevaluasi - performa selalu menjadi perhatian dengan animasi yang terus berjalan. Namun, tidak perlu khawatir, sistem cukup cerdas sehingga Ekspresi hanya akan mengevaluasi ulang jika salah satu input atau parameternya telah berubah.
  • Mengatasi jenis objek yang tepat – Karena Ekspresi adalah hubungan matematika, penting untuk memastikan bahwa persamaan yang menentukan Ekspresi diselesaikan ke jenis properti yang sama yang ditargetkan oleh animasi. Misalnya, jika menganimasikan Offset, Ekspresi Anda harus diselesaikan ke jenis Vector3.

Komponen Ekspresi

Saat membangun hubungan matematika ekspresi, ada beberapa komponen inti:

  • Parameter – nilai yang mewakili nilai konstanta atau referensi ke objek Komposisi lainnya.
  • Operator Matematika – operator matematika umum plus(+), minus(-), multiply(*), divide(/) yang menggabungkan parameter untuk membentuk persamaan. Juga termasuk operator kondisional seperti greater than(>), equal(==), operator ternary (condition ? ifTrue : ifFalse), dll.
  • Fungsi Matematika – fungsi/pintasan matematika berdasarkan System.Numerics. Untuk daftar lengkap fungsi yang didukung, lihat ExpressionAnimation.

Ekspresi juga mendukung sekumpulan kata kunci - frasa khusus yang memiliki arti berbeda hanya dalam sistem ExpressionAnimation. Ini tercantum (bersama dengan daftar lengkap fungsi matematika) dalam dokumentasi ExpressionAnimation .

Membuat Ekspresi dengan ExpressionBuilder

Ada dua opsi untuk membangun Ekspresi di aplikasi UWP Anda:

  1. Bangun persamaan sebagai string melalui API publik resmi.
  2. Bangun persamaan dalam model objek jenis aman melalui alat ExpressionBuilder yang disertakan dengan Windows Community Toolkit.

Demi dokumen ini, kita akan menentukan Ekspresi kita menggunakan ExpressionBuilder.

Parameter

Parameter membentuk inti Ekspresi. Ada dua jenis parameter:

  • Konstanta: ini adalah parameter yang mewakili variabel System.Numeric yang ditik. Parameter ini mendapatkan nilainya yang ditetapkan sekali saat animasi dimulai.
  • Referensi: ini adalah parameter yang mewakili referensi ke CompositionObjects - parameter ini terus memperbarui nilainya setelah animasi dimulai.

Secara umum, Referensi adalah aspek utama tentang bagaimana output Ekspresi dapat berubah secara dinamis. Saat referensi ini berubah, output Ekspresi berubah sebagai hasilnya. Jika Anda membuat Ekspresi dengan String atau menggunakannya dalam skenario templat (menggunakan Ekspresi Anda untuk menargetkan beberapa CompositionObjects), Anda harus memberi nama dan mengatur nilai parameter Anda. Lihat bagian Contoh untuk informasi selengkapnya.

Bekerja dengan KeyFrameAnimations

Ekspresi juga dapat digunakan dengan KeyFrameAnimations. Dalam instans ini, Anda ingin menggunakan Ekspresi untuk menentukan nilai KeyFrame pada titik waktu - jenis KeyFrame ini disebut ExpressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Namun, tidak seperti ExpressionAnimations, ExpressionKeyFrames dievaluasi hanya sekali ketika KeyFrameAnimation dimulai. Perlu diingat, Anda tidak meneruskan ExpressionAnimation sebagai nilai KeyFrame, bukan string (atau ExpressionNode, jika Anda menggunakan ExpressionBuilder).

Contoh

Sekarang mari kita telusuri contoh penggunaan Ekspresi, khususnya sampel PropertySet dari Galeri Sampel UI Windows. Kita akan melihat Ekspresi yang mengelola perilaku gerakan orbit bola biru.

Mengorbit lingkaran

Ada tiga komponen yang dimainkan untuk pengalaman total:

  1. KeyFrameAnimation, menjiwai Offset Y dari bola merah.
  2. PropertiSet dengan properti Rotasi yang membantu mendorong orbit, dianimasikan oleh KeyFrameAnimation lain.
  3. ExpressionAnimation yang mendorong Offset bola biru yang mereferensikan Offset Bola Merah dan properti Rotasi untuk mempertahankan orbit yang sempurna.

Kita akan berfokus pada ExpressionAnimation yang ditentukan dalam #3. Kami juga akan menggunakan kelas ExpressionBuilder untuk membangun Ekspresi ini. Salinan kode yang digunakan untuk membangun pengalaman ini melalui String tercantum di akhir.

Dalam persamaan ini, ada dua properti yang perlu Anda referensikan dari PropertySet; satu adalah offset titik tengah dan yang lainnya adalah rotasi.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Selanjutnya, Anda perlu menentukan komponen Vector3 yang memperuntukkan rotasi orbit aktual.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Catatan

EF adalah notasi "menggunakan" singkatan untuk menentukan ExpressionFunctions.

using EF = Microsoft.Toolkit.Uwp.UI.Animations.Expressions.ExpressionFunctions;

Terakhir, gabungkan komponen-komponen ini bersama-sama dan referensikan posisi Red Ball untuk menentukan hubungan matematika.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

Dalam situasi hipotetis, bagaimana jika Anda ingin menggunakan Ekspresi yang sama ini tetapi dengan dua Visual lainnya, yang berarti 2 set lingkaran yang mengorbit. Dengan CompositionAnimations, Anda dapat menggunakan kembali animasi dan menargetkan beberapa CompositionObjects. Satu-satunya hal yang perlu Anda ubah saat menggunakan Ekspresi ini untuk kasus orbit tambahan adalah referensi ke Visual. Kami menyebut templat ini.

Dalam hal ini, Anda mengubah Ekspresi yang Anda buat sebelumnya. Daripada "mendapatkan" referensi ke CompositionObject, Anda membuat referensi dengan nama lalu menetapkan nilai yang berbeda:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Berikut adalah kode jika Anda menentukan Ekspresi dengan String melalui API publik.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);