Bahar animasyonları

Bu makalede WinUI'de spring NaturalMotionAnimations'ın nasıl kullanılacağı gösterilmektedir.

Önkoşullar

Burada, bu makalelerde ele alınan kavramlar hakkında bilgi sahibi olduğunuzu varsayıyoruz:

• Doğal hareket animasyonları

Neden yaylar?

Yaylar, hayatımızın bir noktasında hepimizin yaşadığı ortak bir hareket deneyimidir; slinky oyuncaklardan, yayla bağlanmış bloklar içeren Fizik sınıfı deneyimlerine kadar. Bir baharın salınımlı hareketi genellikle onu gözlemleyenlerden eğlenceli ve hafif kalpli bir duygusal tepkiyi teşvik eder. Sonuç olarak, yay hareketi, geleneksel bir Kübik Bézier'den daha fazla hareket hissi veren daha canlı bir deneyim oluşturmak isteyenler için uygulama kullanıcı arabirimine iyi bir şekilde uyarlanır. Bu gibi durumlarda, yaylı hareket yalnızca daha canlı bir hareket deneyimi oluşturmakla kalmaz, aynı zamanda yeni veya şu anda animasyonlu içeriğe de dikkat çekmeye yardımcı olabilir. Uygulama markasına veya hareket diline bağlı olarak, salınım daha belirgin ve görünürdür, ancak diğer durumlarda daha hafiftir.

Kullanıcı arabiriminizde yayları kullanma

Daha önce belirtildiği gibi, yaylar, çok tanıdık ve eğlenceli bir kullanıcı arabirimi deneyimi sağlamak için WinUI uygulamanıza entegre etmek üzere kullanışlı bir hareket olabilir. Kullanıcı arabiriminde yayların yaygın kullanımı şunlardır:

Spring Kullanım Açıklaması	Görsel Örnek
Hareket deneyimini dikkat çekici hale getirmek ve daha canlı görünmesini sağlamak. (Ölçek Animasyonu Oluşturma)
Hareket deneyimini daha enerjik hissettirme (Ofseti Animasyonlama)

Bu durumların her birinde, yay hareketi ya "yeni bir değere doğru yaylanarak" ve etrafında salınarak ya da mevcut değerinin etrafında bir başlangıç hızıyla salınmaya başlar.

Yay hareketinizi tanımlama

NaturalMotionAnimation API'lerini kullanarak bir yay deneyimi oluşturursunuz. Özellikle, Compositor'ın dışında Create* yöntemlerini kullanarak bir SpringNaturalMotionAnimation oluşturursunuz. Ardından hareketin aşağıdaki özelliklerini tanımlayabilirsiniz:

• DampingRatio – animasyonda kullanılan yay hareketinin sönümleme düzeyini ifade eder.

Sönüm Oranı Değeri	Açıklama
DampingRatio = 0	Hasarsız – yay uzun süre salınacak
0 < Sönüm Oranı < 1	Az sönümlü – yay birazdan çoğa doğru salınım yapar.
DampingRatio = 1	Kritik derecede sönümlenmiş – yay salınım gerçekleştirmez.
DampingRatio > 1	Aşırı sönümlü – yay sistemi ani bir yavaşlamayla hızla hedefine ulaşacak ve salınım olmayacak.

• Periyot – bir yay tarafından tek bir salınımın gerçekleştirilmesi için geçen süre.
• Son /Başlangıç Değeri – yay hareketinin başlangıç ve bitiş konumlarını tanımlar (tanımlanmamışsa başlangıç değeri ve/veya son değer geçerli değer olacaktır).
• İlk Hız – hareket için programlı başlangıç hızı.

Ayrıca, hareketin KeyFrameAnimations ile aynı özellikler kümesini de tanımlayabilirsiniz:

• DelayTime / Gecikme Davranışı
• StopBehavior

Offset ve Ölçek/Boyut animasyonu yaparken, Windows Tasarım ekibi tarafından DampingRatio ve Periyot için aşağıdaki değerler ve farklı yay türleri için önerilir.

Mülkiyet	Normal Bahar	Sönümlenmiş Yay	Az Yumuşatılmış Yay
Ofset baskı	Sönüm Oranı = 0,8 Periyot = 50 ms	Sönüm Oranı = 0,85 Periyot = 50 ms	Sönüm Oranı = 0,65 Periyot = 60 ms
Ölçek/Boyut	Sönüm Oranı = 0,7 Dönem = 50 ms	Sönüm Oranı = 0,8 Periyot = 50 ms	Sönüm Oranı = 0,6 Periyot = 60 ms

Özellikleri tanımladıktan sonra, spring NaturalMotionAnimation'ınızı bir CompositionObject'in StartAnimation yöntemine veya bir InteractionTracker InertiaModifier'ın Motion özelliğine iletebilirsiniz.

Example

Bu örnekte, kullanıcı bir genişletme düğmesine tıkladığında gezinti bölmesinin yaylı, salınım hareketiyle animasyonlu olduğu bir gezinti ve tuval kullanıcı arabirimi deneyimi oluşturursunuz.

Gezinti bölmesinin ne zaman görüntülendiğine ilişkin tıklanan olay içinde yay animasyonunu tanımlayarak başlayın. Ardından, InitialValueExpression özelliğini kullanarak FinalValue'yi tanımlamak için bir İfade kullanarak animasyonun özelliklerini tanımlarsınız. Ayrıca bölmenin açılıp açılmadığını ve hazır olduğunuzda animasyonu başlatıp başlatmadığını da izlersiniz.

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

Peki ya bu hareketi girişe bağlamak isterseniz? Yani son kullanıcı dışarı doğru çekinirse bölmeler Yay hareketiyle mi çıkıyor? Daha da önemlisi, kullanıcı daha sert veya daha hızlı çekince hareket, son kullanıcının hızına göre uyarlanır.

Bunu yapmak için aynı Spring Animasyonumuzu alabilir ve InteractionTracker ile bir InertiaModifier'a geçirebilirsiniz. InputAnimations ve InteractionTracker hakkında daha fazla bilgi için bkz. InteractionTracker ile özel düzenleme deneyimleri. Bu kod örneği için InteractionTracker ve VisualInteractionSource'unuzu zaten ayarlamış olduğunuzu varsayacağız. NaturalMotionAnimation ve bu durumda bir yay alacak InertiaModifiers oluşturmaya odaklanacağız.

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

Artık kullanıcı arabiriminizde hem programlı hem de giriş temelli yay animasyonu var!

Özetle, uygulamanızda spring animasyonu kullanma adımları:

1. Compositor'ınızdan SpringAnimation'ınızı oluşturun.
2. Varsayılan olmayan değerler istiyorsanız SpringAnimation özelliklerini tanımlayın:
   • Sönümleme Oranı
   • Süre
   • Son Değer
   • İlk Değer
   • İlk Hız
3. Hedefe atayın.
   • CompositionObject özelliğini animasyonlu olarak kullanıyorsanız SpringAnimation'ı StartAnimation'a parametre olarak geçirin.
   • Giriş ile kullanmak istiyorsanız, InertiaModifier'ın NaturalMotion özelliğini SpringAnimation olarak ayarlayın.