Animace řízené vstupem

Tento článek obsahuje úvod k rozhraní API InputAnimation v aplikacích WinUI a Windows App SDK a doporučuje používat tyto typy animací v uživatelském rozhraní.

Předpoklady

Tady předpokládáme, že znáte koncepty, které jsou popsány v těchto článcích:

• Animace založené na relacích

Plynulý pohyb řízený interakcemi uživatelů

V jazyce Fluent Design je interakce mezi koncovými uživateli a aplikacemi velmi důležitá. Aplikace musí nejen vypadat, ale také přirozeně a dynamicky reagovat na uživatele, kteří s nimi pracují. To znamená, že když se prstem dotknete obrazovky, uživatelské rozhraní by mělo plynule reagovat na různé úrovně dotyku, posouvání by mělo být hladké a pohyb prstu po obrazovce přirozený.

Vytváření uživatelského rozhraní, které dynamicky a plynule reaguje na vstupy uživatelů, má za následek vyšší zapojení uživatelů – Pohyb teď nejen vypadá dobře, ale cítí se dobře a přirozeně, když uživatelé pracují s různými uživatelskými prostředími. To umožňuje koncovým uživatelům snadněji se připojit k vaší aplikaci, čímž se zážitek stává zapamatovatelnějším a příjemnějším.

Rozšíření nad rámec pouhého dotyku

I když je dotykové ovládání jedním z nejběžnějších rozhraní, které koncoví uživatelé používají k manipulaci s obsahem uživatelského rozhraní, budou také používat různé další vstupní způsoby, jako je myš a pero. V těchto případech je důležité, aby koncoví uživatelé vnímali, že uživatelské rozhraní dynamicky reaguje na jejich vstup bez ohledu na to, jaký způsob zadávání se rozhodne použít. Při navrhování prostředí pohybu řízeného vstupem byste měli být obeznámeni s různými způsoby zadávání.

Různé Input-Driven pohybové prostředí

Prostor InputAnimation nabízí několik různých prostředí, které vám umožní vytvářet dynamicky reagující pohyb. Stejně jako zbytek systému animací windows App SDK Composition fungují tyto vstupně řízené animace na nezávislém vlákně, které přispívá k dynamickému pohybu. V některých případech však prostředí využívá existující ovládací prvky a komponenty XAML, části těchto prostředí jsou stále vázané na vlákno uživatelského rozhraní.

Při vytváření dynamických animací pohybu řízených vstupem existují tři základní prostředí:

1. Vylepšení existujících prostředí ScrollView – umožňuje umístění xaml ScrollVieweru pro řízení dynamických animačních prostředí.
2. Funkce řízené polohou ukazatele – využijte pozici kurzoru na prvku UI podrobeném testu zasažení k řízení dynamických animačních efektů.
3. Vlastní zážitky z manipulace s InteractionTrackerem – vytvořte plně přizpůsobené a nezávislé manipulační zážitky pomocí InteractionTrackeru (například posuvné nebo přibližovací plátno).

Vylepšení stávajících prostředí ScrollVieweru

Jedním z běžných způsobů, jak vytvořit dynamičtější zážitky, je rozvíjet na základě existujícího XAML ScrollViewer ovládacího prvku. V těchto situacích využíváte pozici posouvání scrollVieweru k vytvoření dalších součástí uživatelského rozhraní, díky kterým bude jednoduché posouvání dynamičtější. Mezi příklady patří Sticky/Shy Headers a Parallax.

Při vytváření těchto typů zážitků existuje obecný vzorec, kterého je třeba se držet:

1. Přistupte k vlastnosti ScrollManipulationPropertySet v XAML ScrollVieweru, jehož prostřednictvím chcete řídit animaci.
   • Hotovo prostřednictvím rozhraní API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(element UIElement)
   • Vrátí Vlastnost CompositionPropertySet obsahující vlastnost s názvem Translation.
2. Vytvořte Composition ExpressionAnimation s rovnicí, která odkazuje na vlastnost Translation.
3. Spusťte animaci na vlastnost objektu CompositionObject.

Další informace o vytváření těchto prostředí najdete v tématu Vylepšení stávajících prostředí ScrollViewer.

Zážitky řízené polohou ukazatele

Dalším běžným dynamickým prostředím zahrnujícím vstup je řídit animaci na základě pozice ukazatele, například kurzoru myši. V těchto situacích vývojáři při testování v uživatelském rozhraní XAML využívají umístění kurzoru, které umožňuje vytvořit prostředí, jako je Spotlight Reveal.

Při vytváření těchto typů zážitků je třeba dodržet obecný vzorec.

1. Přístup k PointerPositionPropertySet z XAML UIElement, který chcete znát pozici kurzoru při testování.
   • Je provedeno prostřednictvím rozhraní API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element)
   • Vrátí Vlastnost CompositionPropertySet obsahující vlastnost s názvem Position.
2. Vytvořte CompositionExpressionAnimation s rovnicí, která odkazuje na vlastnosti Position.
3. Spusťte animaci u vlastnosti CompositionObject.

Vlastní zážitky z manipulace pomocí InteractionTrackeru

Jednou z výzev při používání xaml ScrollVieweru je, že je vázán na vlákno uživatelského rozhraní. V důsledku toho může zážitek z posouvání a přibližování často trpět zpožděním a chvěním, pokud je vlákno uživatelského rozhraní vytížené, což vede k nepříjemnému zážitku. Kromě toho není možné přizpůsobit mnoho aspektů prostředí ScrollViewer. InteractionTracker byl vytvořen k řešení obou problémů tím, že poskytuje sadu stavebních bloků pro vytvoření vlastních prostředí pro manipulaci, které se spouští na nezávislém vlákně.

Při vytváření zážitků pomocí InteractionTrackeru je obecný vzorec, který je třeba dodržet:

1. Vytvořte objekt InteractionTracker a definujte jeho vlastnosti.
2. Vytvořte VisualInteractionSources pro jakoukoli CompositionVisual, která zachytí vstup pro InteractionTracker, aby ho zpracovala.
3. Vytvořte objekt ExpressionAnimation pro Composition s rovnicí, která odkazuje na vlastnost Position u InteractionTracker.
4. Spusťte animaci na vlastnost objektu Composition Visual, kterou chcete řídit pomocí InteractionTracker.