Bahar animasyonları

Makalede 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?

** Hayatımızın bir noktasında hepimizin yaşadığı ortak bir hareket deneyimi olan yaylar; slinky oyuncaklarından yay bağlı blok kullanılarak yapılan fizik sınıfı deneyimlerine kadar çeşitlilik gösterir. 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 Bezier'den çok son kullanıcıya "açılan" daha canlı bir hareket deneyimi oluşturmak isteyenler için uygulama kullanıcı arabirimine iyi bir şekilde çevrilir. 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.

Yay animasyonlu hareket

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, uygulamanıza entegre edebileceğiniz kullanışlı bir animasyon olabilir. Kullanıcı arabiriminde yayların yaygın kullanımı şunlardır:

Spring Kullanım Açıklaması	Görsel Örnek
Hareket deneyimini öne çıkarma ve daha canlı hale getirme. (Ölçek Animasyonu Oluşturma)
Hareket deneyimini daha enerjik hissettirmek (Ofseti Hareketlendirme)	Yay animasyonu ile dengeleme hareketi

Bu durumların her birinde, yay hareketi ya "yeni bir değere doğru hareket ederek" ve bu yeni değer etrafında salınarak ya da mevcut değeri etrafında bazı başlangıç hızları ile salınarak tetiklenebilir.

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
SönümOranı = 0	Sönümsüz – yay uzun süre salınmaya devam edecek
0 < Sönüm Oranı < 1	Az sönümlü - yay birazdan çok salınım yapacak.
DampingRatio = 1	Kritik sönümlenmiş – yay salınım yapmayacaktır.
Sönümleme Oranı > 1	Overdamped – yay ani bir yavaşlama ile hızla hedefine ulaşacak ve salınım yapmayacak.

• Periyot – yayın tek bir salınım yapması 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

Özellikle Ofset ve Ölçek/Boyut animasyonlarında, Windows Tasarım ekibi, farklı yay türleri için DampingRatio ve Periyot değerleri olarak aşağıdaki değerleri önermektedir:

Mülkiyet	Normal Bahar	Sönümlenmiş Yay	Daha Az Sönümlü 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 Periyot = 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 animasyonunu bir CompositionObject'in StartAnimation yöntemine veya InteractionTracker InertiaModifier'ın Motion özelliğine gönderebilirsiniz.

Örnek

Bir navigasyon ve tuval arayüzü deneyimi oluşturduğunuz bu örnekte, kullanıcı genişlet düğmesine tıklayınca gezinti bölmesi yaylı, salınım hareketiyle animasyonlu olarak açılır.

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. InertiaModifiers oluştururken bu durumda bir yay olan NaturalMotionAnimation'ı alacak şekilde odaklanacağız.

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

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üm Oranı
   • Dönem
   • 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.