Förbättra befintliga ScrollViewer-upplevelser

Den här artikeln beskriver hur du använder en XAML ScrollViewer och ExpressionAnimations för att skapa dynamiska indatadrivna rörelseupplevelser.

Förutsättningar

Här förutsätter vi att du är bekant med de begrepp som beskrivs i dessa artiklar:

• indatadrivna animeringar
• Relationsbaserade animeringar

Varför bygga ovanpå ScrollViewer?

Vanligtvis använder du den befintliga XAML ScrollViewer för att skapa en rullningsbar och zoombar yta för ditt appinnehåll. Med introduktionen av Fluent Design-språket bör du nu också fokusera på hur du använder rullnings- eller zoomningsakten för att driva andra rörelseupplevelser. Du kan till exempel använda rullning för att skapa en oskärpa animering av en bakgrund eller köra positionen för en "klibbig rubrik".

I de här scenarierna använder du beteendet eller manipuleringsfunktionerna som att rulla och zooma för att göra andra delar av appen mer dynamiska. Dessa gör det i sin tur möjligt för appen att känna sig mer sammanhängande, vilket gör upplevelserna mer minnesvärda i slutanvändarnas ögon. Genom att göra appgränssnittet mer minnesvärt kommer slutanvändarna att interagera med appen oftare och under längre perioder.

Vad kan du bygga ovanpå ScrollViewer?

Du kan använda en ScrollViewer-position för att skapa ett antal dynamiska upplevelser:

• Parallax – använd positionen för en ScrollViewer för att flytta bakgrunds- eller förgrundsinnehåll i relativ takt till rullningspositionen.
• StickyHeaders – använd positionen för en ScrollViewer för att animera och "sticka" en rubrik till en position
• Input-Driven Effekter – använd Scrollviewerns position för att animera en kompositionseffekt, till exempel oskärpa.

Genom att referera till positionen för en ScrollViewer med en ExpressionAnimation kan du i allmänhet skapa en animering som dynamiskt ändras i förhållande till rullningsmängden.

Använda ScrollViewerManipulationPropertySet

Om du vill skapa dessa dynamiska upplevelser med hjälp av en XAML ScrollViewer måste du kunna referera till rullningspositionen i en animering. Detta görs genom att komma åt en CompositionPropertySet utanför XAML ScrollViewer med namnet ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet innehåller en enda Vector3-egenskap med namnet Översättning som ger åtkomst till rullningspositionen för ScrollViewer. Du kan sedan referera till detta som vilken annan CompositionPropertySet som helst i din ExpressionAnimation.

Allmänna steg för att komma igång:

1. Åtkomst till ScrollViewerManipulationPropertySet via ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Skapa en ExpressionAnimation som refererar till Translation-egenskapen från PropertySet-egenskapen.
   • Glöm inte att ange referensparametern!
3. Rikta in dig på egenskapen CompositionObject med ExpressionAnimation.

Anmärkning

Vi rekommenderar att du tilldelar egenskapenSet som returneras från metoden GetScrollViewerManipulationPropertySet till en klassvariabel. Detta säkerställer att egenskapsuppsättningen inte rensas av Garbage Collector och därmed inte påverkar ExpressionAnimation den refereras till. ExpressionAnimations har ingen stark referens till något av de objekt som används i ekvationen.

Exempel

Låt oss ta en titt på hur parallaxexemplet som visas ovan sammanställs. Som referens finns all källkod för appen i Windows UI Dev Labs-lagringsplatsen på GitHub.

Det första är att få en referens till ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Nästa steg är att skapa ExpressionAnimation som definierar en ekvation som använder scrollpositionen för ScrollViewer.

_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))";

Anmärkning

Du kan också använda Hjälpklasser för ExpressionBuilder för att konstruera samma uttryck utan att behöva använda strängar:

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

Slutligen tar du den här ExpressionAnimation och riktar in dig på den visuella komponenten som du vill använda parallaxeffekten på. I det här fallet är det bilden för vart och ett av objekten i listan.

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