Doğal hareket animasyonları

Bu makalede NaturalMotionAnimation alanına kısa bir genel bakış ve kullanıcı arabiriminizde bu tür animasyonları kullanmayı kavramsal olarak nasıl düşünebilirsiniz?

Hareketin tanıdık ve doğal hissettirilmesi

Harika uygulamalar, kullanıcı dikkatini yakalayan ve koruyan deneyimler oluşturan ve kullanıcılara görevlerde yol göstermesine yardımcı olan uygulamalardır. Hareket, kullanıcı arabirimini Kullanıcı Deneyimi'nden ayıran ve kullanıcılarla etkileşimde bulundukları uygulama arasında bağlantı kuran temel ayırt edici faktördür. Bağlantı ne kadar iyi olursa, son kullanıcılardan o kadar yüksek katılım ve memnuniyet elde edilir.

Bağlantının kurulmasına yardımcı olabilecek yollardan biri, kullanıcılara tanıdık gelen deneyimler oluşturan harekettir. Kullanıcılar, gerçek yaşam deneyimlerini temel alan hareketi nasıl algıladıkları konusunda bilinçsiz bir beklentiye sahiptir. Nesnelerin zemin boyunca nasıl kaydığını, masadan nasıl düştüğünü, birbirine nasıl çarptığını ve yayla salındığını görüyoruz. Gerçek dünya fiziğine dayanan ve bu beklentiden yararlanan hareket, gözümüze daha doğal görünür ve hissedilir. Hareket daha doğal ve etkileşimli hale gelir, ancak daha da önemlisi, tüm deneyim daha unutulmaz ve keyifli hale gelir.

Net sonuç, uygulamanızda daha yüksek kullanıcı etkileşimi ve kullanıcı tutma oranıdır.

Kontrol ve Dinamizmi Dengeleme

Geleneksel kullanıcı arabiriminde , KeyFrameAnimation'larhareketi tanımlamanın baskın yoludur. KeyFrame'ler başlangıç, bitiş ve ilişkilendirmeyi tanımlamak için tasarımcılara ve geliştiricilere en yüksek denetimi sağladı. Bu birçok durumda çok yararlı olsa da, KeyFrame Animasyonları çok dinamik değildir; hareket uyarlamalı değildir ve herhangi bir koşulda aynı görünür.

Spektrumun diğer ucunda, oyun ve fizik motorlarında sıklıkla görülen simülasyonlar vardır. Bu deneyimler genellikle kullanıcıların etkileşimde olduğu en canlı ve dinamik deneyimdir. Bu da kullanıcıların her gün gördüğü bu ortam ve rastgelelik duygusunu oluşturur. Bu hareket daha canlı ve dinamik hissettirse de tasarımcılar ve geliştiriciler daha az denetime sahiptir ve bu nedenle geleneksel kullanıcı arabirimiyle tümleştirmeyi daha zor hale getirir.

NaturalMotionAnimation, bu boşluğu doldurmak için var olur; animasyonun başlangıç ve bitişi gibi önemli öğeleri için bir denetim dengesi sağlar, ancak doğal ve dinamik görünen ve hissettiren hareketi korur.

Uyarı

NaturalMotionAnimations, KeyFrame Animasyonlarının yerine geçmeyecek şekilde tasarlanmamıştır; Fluent tasarım dilinde Hala KeyFrame'lerin önerildiği yerler vardır. NaturalMotionAnimations, hareketin gerekli olduğu yerlerde kullanılmak üzere tasarlanır, ancak KeyFrame Animasyonları yeterince dinamik değildir.

NaturalMotionAnimations Kullanma

WinUI ve Windows Uygulama SDK'sında doğal bir hareket deneyimine erişebilirsiniz: yay animasyonları. Daha ayrıntılı bir yay açıklaması için Yay animasyonları'na bakın.

Bu hareket türü, geliştiricilerin kontrol ve dinamizm dengesiyle kullanıcı arabiriminde daha tanıdık ve doğal duygu hareketi oluşturmasını sağlayan yeni bir animasyon türü olan yeni NaturalMotionAnimation kullanılarak elde edilir. Aşağıdaki özellikleri kullanıma sunar:

• Başlangıç ve bitiş değerlerini tanımlayın.
• InitialVelocity'yi tanımlayın ve InteractionTracker ile girişe bağlayın.
• Harekete özgü özellikleri (örneğin, yaylar için Sönümleme Oranı) tanımlayın.

Başlamak için genel formül:

1. Create yöntemlerinden birini kullanarak Compositor'da NaturalMotionAnimation oluşturun .
2. Animasyonun özelliklerini tanımlayın.
3. NaturalMotionAnimation değerini bir CompositionObject öğesinin StartAnimation çağrısına parametre olarak geçirin.
   • Alternatif olarak, bir InteractionTracker InertiaModifier nesnesinin Motion özelliğine ayarlayabilirsiniz.

Bir Visual'ı yeni bir X Kaydırma konumuna "yaylanacak" şekilde hareket ettirmek için spring NaturalMotionAnimation kullanan temel bir örnek:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);