için zamana dayalı animasyonlar

içindeki bir bileşen veya tüm kullanıcı deneyimi değiştiğinde, son kullanıcılar genellikle bunu iki şekilde gözlemler: zaman içinde veya anlık olarak. Windows platformunda, ilki ikincisine göre tercih edilir - anında değişen kullanıcı deneyimleri genellikle son kullanıcıları karıştırır ve şaşırtır çünkü olanları takip edememektedirler. Son kullanıcı daha sonra deneyimi sarsıcı ve doğal olmayan olarak algılar.

Bunun yerine, kullanıcı arabiriminizi zaman içinde değiştirerek son kullanıcıya yol gösterebilir veya deneyimdeki değişiklikleri bildirebilirsiniz. Windows platformunda, bu işlem KeyFrameAnimations olarak da bilinen zamana dayalı animasyonlar kullanılarak yapılır. KeyFrameAnimations, bir kullanıcı arabirimini zaman içinde değiştirmenize ve animasyonun nasıl ve ne zaman başlayacağı ve bitiş durumuna nasıl ulaştığı dahil olmak üzere animasyonun her yönünü denetlemenize olanak sağlar. Örneğin, bir nesneyi 300 milisaniye boyunca yeni bir konuma animasyonla taşımak, onu anında "ışınlamaktan" daha hoş olur. Anlık değişiklikler yerine animasyonlar kullanılırken net sonuç daha hoş ve cazip bir deneyimdir.

Zamana dayalı animasyon türleri

Windows'ta güzel kullanıcı deneyimleri oluşturmak için kullanabileceğiniz zaman tabanlı animasyonların iki kategorisi vardır:

Açık Animasyonlar – adından da belirtildiği gibi, güncelleştirmeleri yapmak için animasyonu açıkça başlatırsınız. Örtük Animasyonlar – Bu animasyonlar, bir koşul karşılandığında sistem tarafından sizin adınıza başlatılır.

Bu makalede, KeyFrameAnimations ile açık zamana dayalı animasyonların nasıl oluşturulacağını ve kullanılacağını ele alacaktır.

Hem açık hem de gizli zaman tabanlı animasyonlar için, animasyon yapabileceğiniz CompositionObjects'un farklı özellik türlerine karşılık gelen farklı türler vardır.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• Skaler Anahtar Kare Animasyonu
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

KeyFrameAnimations ile zamana dayalı animasyonlar oluşturma

KeyFrameAnimations ile açık zamana dayalı animasyonların nasıl oluşturulacağını açıklamadan önce birkaç kavramı inceleyelim.

• Anahtar Kareler – Bunlar, bir animasyonun geçiş yapacağı tek tek "anlık görüntülerdir".
  • Anahtar ve değer çiftleri olarak tanımlanır. Anahtar, 0 ile 1 arasındaki ilerlemeyi temsil eder; diğer adıyla, bu "anlık görüntü," animasyon ömrünün neresinde gerçekleştiğini gösterir. Diğer parametre şu anda özellik değerini temsil eder.
• KeyFrameAnimation Özellikleri – Kullanıcı arabiriminin gereksinimlerini karşılamak için uygulayabileceğiniz özelleştirme seçenekleri.
  • DelayTime – StartAnimation çağrıldıktan sonra animasyon başlamadan önceki süre.
  • Süre – animasyonun süresi.
  • IterationBehavior: Bir animasyon için sayı veya sonsuz yineleme davranışı.
  • IterationCount – Bir KeyFrame Animasyonunun sonlu kez yinelenme sayısı.
  • Anahtar Çerçeve Sayısı – belirli bir Anahtar Çerçeve Animasyonundaki Anahtar Çerçeve sayısını okuma.
  • StopBehavior – StopAnimation çağrıldığında bir animasyon özelliği değerinin davranışını belirtir.
  • Yön: Animasyonun çalışması için yönünü belirtir.
• Animasyon Grubu: Aynı anda birden çok animasyon başlatma.
  • Genellikle aynı anda birden çok özelliğe animasyon eklemek istediğinizde kullanılır.

Daha fazla bilgi için bkz . CompositionAnimationGroup.

Bu kavramları göz önünde bulundurarak bir KeyFrameAnimation oluşturmak için genel formülden bahsedelim:

1. CompositionObject'i ve animasyon eklemeniz gereken ilgili özelliğini belirleyin.
2. Kompozitöre ait ve animasyon yapmak istediğiniz özellik türüyle eşleşen bir KeyFrameAnimation Türü şablonu oluşturun.
3. Animasyon şablonunu kullanarak KeyFrame eklemeye ve animasyonun özelliklerini tanımlamaya başlayın.
   • En az bir KeyFrame gereklidir (100% veya 1f ana kare).
   • Bir süre de tanımlamanız önerilir.
4. Bu animasyonu çalıştırmaya hazır olduğunuzda, animasyon eklemek istediğiniz özelliği hedefleyerek CompositionObject üzerinde StartAnimation(...) öğesini çağırın. Özellikle:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Çalışan bir animasyona sahipseniz ve Animasyon veya Animasyon Grubunu durdurmak istiyorsanız şu API'leri kullanabilirsiniz:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Şimdi bu formülün nasıl çalıştığını görmek için bir örneğe göz atalım.

Example

Bu örnekte, bir görselin <0,0,0 ile 200,0,0><> olan uzaklığını 1 saniyeden fazla hareketlendirmek istiyorsunuz. Buna ek olarak, bu konumlar arasında görsel animasyonu 10 kez görmek istiyorsunuz.

Öncelikle animasyon eklemek istediğiniz CompositionObject ve özelliğini tanımlayarak başlarsınız. Bu durumda, kırmızı kare redVisual adlı bir Kompozisyon Görseli ile temsil edilir. Animasyonunuzu bu nesneden başlatırsınız.

Offset özelliği için animasyon eklemek istediğinizde, bir Vector3KeyFrameAnimation oluşturmanız gerekir (Offset, Vector3 türündedir). Ayrıca KeyFrameAnimation için karşılık gelen KeyFrame'leri de tanımlarsınız.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Ardından, KeyFrameAnimation'ın özelliklerini, süresini ve iki konum (geçerli ve <200,0,0>) arasında 10 kez animasyon yapma davranışını tanımlayarak belirlersiniz.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Son olarak, bir animasyonu çalıştırmak için bir CompositionObject özelliğinde başlatmanız gerekir.

redVisual.StartAnimation("Offset", animation);

İşte tam kod.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}