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

Tento článek vysvětluje, jak používat WinUI XAML ScrollViewer a ExpressionAnimations k vytváření dynamických prostředí pohybu řízených vstupem.

Předpoklady

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

• Animace řízené vstupem
• Animace založené na relacích

Proč stavět na základě ScrollVieweru?

Obvykle použijete existující komponentu XAML ScrollViewer k vytvoření posouvaného a přibližovatelného povrchu pro obsah vaší aplikace. Se zavedením jazyka Fluent Design byste se teď také měli zaměřit na to, jak používáním posouvání nebo přiblížení povrchu řídit jiné pohybové efekty. Například pomocí posouvání můžete řídit animaci rozostření pozadí nebo řídit pozici "lepivého záhlaví".

V těchto scénářích využíváte chování nebo manipulaci, jako je posouvání a zoomování, aby byly další části vaší aplikace dynamičtější. Díky těmto možnostem může aplikace působit sjednoceněji, což činí zážitky pro koncové uživatele zapamatovatelnější. Díky lepšímu zapamatovatelnému uživatelskému rozhraní aplikace budou koncoví uživatelé pracovat s aplikací častěji a po delší dobu.

Co můžete vytvořit nad ScrollViewerem?

Umístění scrollVieweru můžete využít k vytvoření řady dynamických prostředí:

• Paralaxa – pomocí pozice ScrollVieweru můžete posouvat pozadí nebo popředí rychlostí relativní k pozici posouvání.
• StickyHeaders – využití pozice ScrollViewer k animaci a "přilepení" záhlaví na určitou pozici
• Input-Driven Efekty řízené vstupy – použijte pozici posuvníku k animaci kompozičního efektu, jako je rozostření.

Obecně platí, že odkazováním na pozici ScrollVieweru pomocí ExpressionAnimation můžete vytvořit animaci, která dynamicky mění relativní velikost posouvání.

Použití ScrollViewerManipulationPropertySet

Pokud chcete vytvořit tato dynamická prostředí pomocí xaml ScrollVieweru, musíte být schopni odkazovat na pozici posouvání v animaci. To se provádí přístupem k objektu CompositionPropertySet z XAML ScrollViewer, který se nazývá ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet obsahuje jednu Vektor3 vlastnost s názvem Translation, která poskytuje přístup k pozici posuvníku ScrollViewer. Pak na to můžete odkazovat stejně jako na jakoukoli jinou vlastnost CompositionPropertySet ve výrazu Animation.

Obecné kroky pro zahájení:

1. Přejděte k ScrollViewerManipulationPropertySet prostřednictvím ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Vytvořte ExpressionAnimation, která odkazuje na vlastnost Translation z PropertySet.
   • Nezapomeňte nastavit referenční parametr.
3. Zacílení na vlastnost objektu CompositionObject pomocí ExpressionAnimation.

Poznámka:

Doporučuje se přiřadit PropertySet vrácené z GetScrollViewerManipulationPropertySet metody do proměnné třídy. Tím se zajistí, že sada vlastností nebude uvolňováním paměti vyčištěna, a tím pádem nebude mít nechtěný vliv na ExpressionAnimation, ve které se používá. ExpressionAnimations neudržují silný odkaz na žádný z objektů použitých v rovnici.

Příklad

Pojďme se podívat, jak se vytvoří výše uvedený vzor paralaxu. Pro referenci najdete veškerý zdrojový kód aplikace v úložišti Windows UI Dev Labs na GitHubu.

První věc je získat odkaz na ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Dalším krokem je vytvoření ExpressionAnimation, která definuje rovnici, která využívá pozici posouvání scrollVieweru.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Poznámka:

Můžete také využít pomocné třídy ExpressionBuilder k vytvoření tohoto stejného výrazu bez nutnosti řetězců:

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Nakonec vezmete tuto animaci výrazu a cílíte na vizuální prvek, na který chcete použít paralaxní efekt. V tomto případě se jedná o obrázek pro každou položku v seznamu.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);