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 hareket ettirmek, 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. Gizli Animasyonlar: Bu animasyonlar, bir koşul karşılandığında sistem tarafından sizin için başlatılır.

Bu makalede, KeyFrameAnimations ile açık zamana dayalı animasyon oluşturma ve kullanma hakkında bilgi edineceğiz.

Hem açık hem de örtük zaman tabanlı animasyonlar için, canlandırabileceğiniz farklı CompositionObject’ların özelliği türlerine karşılık gelen farklı türler mevcuttur.

• Renk Anahtar Kare Animasyonu (ColorKeyFrameAnimation)
• QuaternionKeyFrameAnimation
• Skaler Anahtar Kare Animasyonu
• Vector2 Anahtar Kare Animasyonu
• 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.

• KeyFrames – Bunlar, bir animasyonun geçeceği tek tek "karelerdir".
  • Anahtar ve değer çiftleri olarak tanımlanır. Anahtar, animasyon süresi içinde 0 ile 1 arasındaki ilerlemeyi temsil eder, yani bu "anlık görüntü" tam olarak burada gerçekleşir. 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 Kare Sayısı – belirli bir Anahtar Kare Animasyonunda kaç Anahtar Kare içerdiğinin okunması.
  • StopBehavior – StopAnimation çağrıldığında bir animasyon özelliği değerinin davranışını belirtir.
  • Animasyonun oynatılma 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. Canlandırmanız gereken CompositionObject'i ve onun ilgili özelliğini belirleyin.
2. Animasyon eklemek istediğiniz özellik türüyle eşleşen bir oluşturucu 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.

Örnek

Bu örnekte, bir görselin offsetini 0,0,0<>konumundan 200,0,0<>konumuna 1 saniye içinde animasyon yapmak 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 redVisualadlı bir Oluşturma Görseli ile temsil edilir. Animasyonunuzu bu nesneden başlatırsınız.

Ardından, Offset özelliğine animasyon eklemek istediğiniz için 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 süresini ve iki konum (geçerli ve <200,0,0>) arasında 10 kez animasyon yapma davranışını açıklamak için özelliklerini tanımlarsınız.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.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 = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}