Animace přirozeného pohybu

Tento článek obsahuje stručný přehled prostoru NaturalMotionAnimation a o tom, jak se v uživatelském rozhraní koncepčně zamyslet nad používáním těchto typů animací.

Dělání pohybu známým a přirozeným

Skvělé aplikace jsou ty, které vytvářejí prostředí, která zachycují a udržují pozornost uživatelů, a pomáhají uživatelům provádět úkoly. Pohyb je klíčový rozdílový faktor, který odděluje uživatelské rozhraní od uživatelského prostředí – vyvolá spojení mezi uživateli a aplikací, se kterou pracují. Čím je připojení lepší, tím vyšší zapojení a spokojenost koncových uživatelů.

Jedním ze způsobů, jak pohyb může pomoci vybudovat toto spojení, je vytvoření zážitků, které vypadají a působí uživatelům povědomě. Uživatelé mají nevědomé očekávání, jak vnímají pohyb, který je založen na skutečných životních zkušenostech. Vidíme, jak se objekty posunují přes podlahu, spadnou z stolu, odrazí se do sebe a oscilují pružinou. Pohyb, který využívá toto očekávání tím, že je založený na fyzikálních principech reálného světa, vypadá a působí přirozeněji. Pohyb se stává přirozenější a interaktivní, ale důležitější je, že celý zážitek se stává zapamatovatelnější a radostnější.

Čistým výsledkem je vyšší angažovanost a udržení uživatelů ve vaší aplikaci.

Vyvážení kontroly a dynamismu

V tradičním uživatelském rozhraní představuje KeyFrameAnimations převládající způsob popisu pohybu. Klíčové rámce poskytují návrhářům a vývojářům nejvyšší kontrolu, aby definovali počáteční, koncové a interpolační prvky. I když je to velmi užitečné v mnoha případech, animace klíčových snímků nejsou velmi dynamické; pohyb není adaptivní a vypadá stejně za jakýchkoli podmínek.

Na druhém konci spektra existují simulace, které se často zobrazují ve herních a fyzikálních motorech. Tyto zkušenosti jsou často nejživotnější a dynamické, se kterými uživatelé pracují – vytvářejí smysl pro atmosféru a náhodnost, které uživatelé vidí každý den. I když dodává pocitu živosti a dynamiky, návrháři a vývojáři mají méně možností ovládat pohyb, což ztěžuje její integraci do tradičního uživatelského rozhraní.

NaturalMotionAnimation existuje, aby pomohl překlenout tuto propast – umožňuje rovnováhu v ovládání důležitých prvků animace, jako je začátek/dokončení, při zachováním pohybu, který vypadá a působí přirozeně a dynamicky.

Poznámka:

NaturalMotionAnimations nejsou určeny jako náhrada pro animace klíčových snímků – v designu Fluent se stále doporučují klíčové snímky. NaturalMotionAnimations jsou určeny k použití na místech, kde se vyžaduje pohyb, ale animace klíčových snímků nejsou dostatečně dynamické.

Použití NaturalMotionAnimations

Ve WinUI a sadě Windows App SDK máte přístup k přirozenému pohybovému zážitku: animace s pružinou. Podrobnější návod k pramenům najdete v animaci Spring .

Tento typ pohybu se dosahuje pomocí nové funkce NaturalMotionAnimation – nového typu animace zaměřeného na to, aby vývojáři mohli do svého uživatelského rozhraní zabudovat lépe známý a přirozený pohyb s vyvážením řízení a dynamismu. Zpřístupňují následující možnosti:

• Definujte počáteční a koncové hodnoty.
• Definujte InitialVelocity a propojte vstup pomocí InteractionTrackeru.
• Definujte vlastnosti specifické pro pohyb (například DampingRatio pro pružiny.)

Obecný vzorec, který vám umožní začít:

1. Pomocí jedné z metod Create vytvořte NaturalMotionAnimation z compositoru.
2. Definujte vlastnosti animace.
3. Předejte NaturalMotionAnimation jako parametr při zavolání StartAnimation na CompositionObject.
   • Nebo nastavit vlastnost Motion u modifikátoru inertia InteractionTracker InertiaModifier.

Základní příklad použití animace NaturalMotionAnimation typu pružiny k přesunu vizuálního objektu na novou polohu posunu X.

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