Aracılığıyla paylaş

İlişki tabanlı animasyonlar

Bu makalede, Composition ExpressionAnimations kullanarak ilişki tabanlı animasyonlar yapma hakkında kısa bir genel bakış sağlanmaktadır.

Dinamik ilişki tabanlı deneyimler

Bir uygulamada hareket deneyimleri oluştururken, hareketin zamana bağlı olmadığı, başka bir nesnedeki bir özelliğe bağımlı olduğu zamanlar olabilir. KeyFrameAnimations bu tür hareket deneyimlerini kolayca ifade edemez. Bu belirli örneklerde, hareketin artık ayrık ve önceden tanımlanmış olması gerekmez. Bunun yerine hareket, diğer nesne özellikleriyle ilişkisine göre dinamik olarak uyarlanabilir. Örneğin, bir nesnenin yatay konumuna göre opaklığına animasyon uygulayabilirsiniz. Diğer örnekler arasında Yapışkan Üst Bilgiler ve Parallax gibi hareket deneyimleri yer alır.

Bu tür hareket deneyimleri, tekil ve bağımsız hissetmek yerine daha bağlı hissettiren bir kullanıcı arabirimi oluşturmanıza olanak sağlar. Kullanıcıya dinamik kullanıcı arabirimi deneyimi izlenimi verir.

Yörünge çemberi

Parallax içeren liste görünümü

ExpressionAnimations Kullanma

İlişki tabanlı hareket deneyimleri oluşturmak için ExpressionAnimation türünü kullanırsınız. ExpressionAnimations (veya kısaca İfadeler), sistemin her karedeki animasyon özelliğinin değerini hesaplamak için kullandığı bir ilişki olan matematiksel ilişkiyi ifade etmenizi sağlayan yeni bir animasyon türüdür. Başka bir şekilde ifadeler, kare başına animasyon özelliğinin istenen değerini tanımlayan matematiksel bir denklemdir. İfadeler, aşağıdakiler dahil olmak üzere çok çeşitli senaryolarda kullanılabilen çok yönlü bir bileşendir:

ExpressionAnimations ile çalışırken, yukarıda bahsedilmesi gereken birkaç şey vardır:

  • Sonsuz – KeyFrameAnimation eşdeğerinin aksine, Expression'lar süre bakımından sınırsızdır. İfadeler, matematiksel ilişkiler oldukları için sürekli "çalışan" animasyonlardır. İsterseniz bu animasyonları durdurma seçeneğiniz vardır.
  • Sürekli çalışan animasyonlarda, çalışmakta ancak her zaman değerlendirilmemekte oldukları için performans her zaman önemlidir. Ancak endişelenmenize gerek yok, sistem İfade'nin yalnızca girişlerinden veya parametrelerinden herhangi biri değiştiyse yeniden değerlendireceği kadar akıllıdır.
  • Doğru nesne türüne çözümleniyor – İfadeler matematiksel ilişkiler olduğundan, İfadeyi tanımlayan denklemin animasyon tarafından hedeflenen özelliğin aynı türüne çözümlendiğinden emin olmak önemlidir. Örneğin, Uzaklık animasyonu oluşturuyorsanız İfadeniz bir Vector3 türüne çözümlenmelidir.

bir İfadenin Bileşenleri

bir İfadenin matematiksel ilişkisini oluştururken birkaç temel bileşen vardır:

  • Parametreler – sabit değerleri temsil eden değerler veya diğer Oluşturma nesnelerine başvurular.
  • Matematiksel İşleçler– denklem oluşturmak için parametreleri birleştiren tipik matematik işleçleri artı(+), eksi(-), çarpma(*), bölme(/). Ayrıca büyüktür(>), eşittir(==), üçüncül işleç (koşul ? ifTrue : ifFalse) gibi koşullu işleçler de dahildir.
  • Matematiksel İşlevler – System.Numerics tabanlı matematiksel işlevler/kısayollar. Desteklenen işlevlerin tam listesi için bkz . ExpressionAnimation.

İfadeler ayrıca yalnızca ExpressionAnimation sisteminde ayrı anlamlara sahip özel tümcecikler olan bir anahtar sözcük kümesini de destekler. Bunlar ExpressionAnimation belgelerinde (matematik işlevlerinin tam listesiyle birlikte) listelenir.

ExpressionBuilder ile İfade Oluşturma

WinUI uygulamanızda İfade oluşturmak için iki seçenek vardır:

  1. Denklemi resmi, genel API aracılığıyla bir dize olarak oluşturun.
  2. Denklemi, Windows Topluluk Araç Seti'ne dahil edilen ExpressionBuilder aracı aracılığıyla tür açısından güvenli bir nesne modelinde oluşturun.

Bu belgenin iyiliği için ExpressionBuilder kullanarak İfadelerimizi tanımlayacağız.

Parametreler

Parametreler bir İfadenin çekirdeğini oluşturur. İki tür parametre vardır:

  • Sabitler: Bunlar, türü belirlenmiş System.Numeric değişkenlerini temsil eden parametrelerdir. Bu parametreler, animasyon başlatıldığında değerlerini bir kez atanır.
  • Referanslar: Bunlar, CompositionObjects'a yönelik referansları temsil eden parametrelerdir. Bu parametreler, bir animasyon başlatıldıktan sonra sürekli olarak güncellenen değerler alır.

Genel olarak, Referanslar bir İfadenin çıktısının dinamik olarak nasıl değişebileceğini belirleyen ana unsurdur. Bu bağlantılar değiştikçe, ifadenin çıkışı doğrudan değişir. İfadenizi Dizelerle oluşturursanız veya bir şablon oluşturma senaryosunda kullanırsanız (birden çok CompositionObject'i hedeflemek için İfadenizi kullanarak), parametrelerinizin değerlerini adlandırmanız ve ayarlamanız gerekir. Daha fazla bilgi için Örnek bölümüne bakın.

KeyFrameAnimations ile çalışma

İfadeler KeyFrameAnimations ile de kullanılabilir. Bu örneklerde bir KeyFrame değerini bir zaman noktasında tanımlamak için bir İfade kullanmak istiyorsunuz; bu tür KeyFrame'ler ExpressionKeyFrames olarak adlandırılır.

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

Ancak ExpressionAnimations'ın aksine, ExpressionKeyFrame'ler KeyFrameAnimation başlatıldığında yalnızca bir kez değerlendirilir. Bir ExpressionAnimation değerini bir dize (veya ExpressionBuilder kullanıyorsanız ExpressionNode) yerine KeyFrame değeri olarak geçirmeyebilirsiniz.

Example

Şimdi İfadeleri kullanma örneğini, özellikle de Windows Kullanıcı Arabirimi Örnek Galerisi'nden PropertySet örneğini inceleyelim. Mavi topun yörünge hareketi davranışını yöneten İfade'ye göz atacağız.

Yörünge çemberi

Toplam deneyim için üç bileşen vardır:

  1. Kırmızı topun Y Uzaklığını canlandıran bir KeyFrameAnimation.
  2. Başka bir KeyFrameAnimation tarafından animasyonlandırılmış, yörüngeyi hareketlendirmeye yardımcı olan rotation özelliğine sahip bir PropertySet.
  3. Mükemmel bir yörüngeyi korumak için Kırmızı Top Ofsetine ve Rotation özelliğine başvuran mavi topun Ofsetini yönlendiren bir ExpressionAnimation.

3. adımda tanımlanan ExpressionAnimation'a odaklanacağız. Bu İfadeyi oluşturmak için ExpressionBuilder sınıflarını da kullanacağız. Dizeler aracılığıyla bu deneyimi oluşturmak için kullanılan kodun bir kopyası sonunda listelenir.

Bu denklemde PropertySet'ten başvurmanız gereken iki özellik vardır; biri merkez noktası uzaklığı, diğeri döndürmedir.

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

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

Ardından, gerçek yörünge dönüşünü hesaplayan Vector3 bileşenini tanımlamanız gerekir.

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

Uyarı

EF, WinUI ifade oluşturucu kütüphanenizden ExpressionFunctions tanımlamak için kullanılan bir 'kullanma' kısaltmasıdır.

Son olarak, bu bileşenleri bir araya getirin ve matematiksel ilişkiyi tanımlamak için Kırmızı Top'un konumuna başvurun.

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

Varsayımsal bir durumda, örneğin iki görselden oluşan, yani 2 set yörünge çemberinden oluşan aynı ifadeyi kullanmak isteseydiniz ne olurdu? CompositionAnimations ile animasyonu yeniden kullanabilir ve birden çok CompositionObject'i hedefleyebilirsiniz. Bu ifadeyi ek yörünge durumu için kullanırken değiştirmeniz gereken tek şey Görsel'e olan referansını değiştirmenizdir. Buna şablon diyoruz.

Bu durumda, daha önce oluşturduğunuz İfadeyi değiştirirsiniz. CompositionObject için bir referans "almak" yerine, bir adla bir referans oluşturur ve ardından farklı değerler atarsınız:

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);

İfadenizi genel API aracılığıyla Dizelerle tanımladıysanız kod aşağıda verilmiştir.

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);
  • Last updated on