Migliorare le esperienze ScrollViewer esistenti

Questo articolo illustra come usare un controllo ScrollViewer XAML WinUI e ExpressionAnimations per creare esperienze di movimento basate su input dinamico.

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

• Animazioni basate su input
• Animazioni basate sulle relazioni

Perché eseguire la compilazione su ScrollViewer?

Di solito, usi il controllo ScrollViewer XAML esistente per creare un'area scorrevole e zoomabile per il contenuto dell'app. Con l'introduzione del linguaggio Fluent Design, è ora necessario concentrarsi anche su come usare l'azione di scorrimento o zoom di una superficie per guidare altre esperienze di movimento. Ad esempio, usando lo scorrimento per guidare un'animazione di sfocatura di uno sfondo o per guidare la posizione di un'intestazione adesiva.

In questi scenari, stai sfruttando il comportamento o le esperienze di manipolazione, ad esempio Lo scorrimento e lo zoom per rendere altre parti dell'app più dinamiche. Questi a loro volta consentono all'app di sentirsi più coesi, rendendo le esperienze più memorabili agli occhi degli utenti finali. Rendendo più memorabile l'interfaccia utente dell'app, gli utenti finali interagiscono con l'app più frequentemente e per periodi più lunghi.

Che cosa è possibile creare sopra ScrollViewer?

È possibile sfruttare la posizione di scrollViewer per creare una serie di esperienze dinamiche:

• Parallasse: usare la posizione di scrollViewer per spostare lo sfondo o il contenuto in primo piano a una velocità relativa alla posizione di scorrimento.
• StickyHeaders: usare la posizione di scrollViewer per animare e "attaccare" un'intestazione a una posizione
• Effetti a guida di input: usare la posizione di uno Scrollviewer per animare un effetto di composizione, come la sfocatura.

In generale, facendo riferimento alla posizione di scrollViewer con expressionAnimation, è possibile creare un'animazione che cambia dinamicamente rispetto alla quantità di scorrimento.

Uso di ScrollViewerManipulationPropertySet

Per creare queste esperienze dinamiche usando un controllo ScrollViewer XAML, devi essere in grado di fare riferimento alla posizione di scorrimento in un'animazione. Per fare ciò, accedere a un CompositionPropertySet dal XAML ScrollViewer chiamato ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet contiene una singola proprietà Vector3 denominata Translation che consente di accedere alla posizione di scorrimento di ScrollViewer. Puoi quindi farvi riferimento come a qualsiasi altro CompositionPropertySet in un'ExpressionAnimation.

Passaggi generali per iniziare:

1. Accedere a ScrollViewerManipulationPropertySet tramite ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Creare un oggetto ExpressionAnimation che fa riferimento alla proprietà Translation da PropertySet.
   • Non dimenticare di impostare il parametro di riferimento.
3. Impostare come destinazione la proprietà di compositionObject con ExpressionAnimation.

Esempio

Si esaminerà ora il modo in cui viene messo insieme l'esempio parallasse illustrato in precedenza. Per riferimento, tutto il codice sorgente per l'app è disponibile nel repository Windows UI Dev Labs in GitHub.

La prima cosa consiste nell'ottenere un riferimento a ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Il passaggio successivo consiste nel creare ExpressionAnimation che definisce un'equazione che utilizza la posizione di scorrimento di 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))";

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

Infine, si prende questa ExpressionAnimation e si applica al Visual desiderato per ottenere un effetto parallasse. In questo caso, è l'immagine per ogni elemento nell'elenco.

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