Améliorer les expériences ScrollViewer existantesEnhance existing ScrollViewer experiences

Cet article explique comment utiliser un ScrollViewer et ExpressionAnimations XAML pour créer des animations dynamiques pilotées par entrée.This article explains how to use a XAML ScrollViewer and ExpressionAnimations to create dynamic input-driven motion experiences.

PrérequisPrerequisites

Ici, nous partons du principe que vous êtes familiarisé avec les concepts abordés dans les articles suivants :Here, we assume that you're familiar with the concepts discussed in these articles:

Pourquoi créer en plus de ScrollViewer ?Why build on top of ScrollViewer?

En général, vous utilisez le ScrollViewer XAML existant pour créer une surface de défilement et de zoom pour le contenu de votre application.Typically, you use the existing XAML ScrollViewer to create a scrollable and zoomable surface for your app content. Avec l’introduction du langage de conception Fluent, vous devez maintenant vous concentrer sur la façon d’utiliser le défilement ou le zoom d’une surface pour conduire d’autres expériences de mouvement.With the introduction of the Fluent Design language, you should now also be focusing on how to use the act of scrolling or zooming a surface to drive other motion experiences. Par exemple, en utilisant le défilement pour conduire une animation floue d’un arrière-plan ou un lecteur de la position d’un « en-tête rémanent ».For example, using scrolling to drive a blur animation of a background or drive the position of a "sticky header".

Dans ces scénarios, vous tirez parti des expériences de comportement ou de manipulation telles que le défilement et le zoom pour rendre plus dynamiques d’autres parties de votre application.In these scenarios, you are leveraging the behavior or manipulation experiences like Scrolling and zooming to make other parts of your app more dynamic. Celles-ci permettent à l’application de se sentir plus cohérente, ce qui rend l’expérience plus facile à retenir dans les yeux des utilisateurs finaux.These in turn enable the app to feel more cohesive, making the experiences more memorable in the eyes of end users. En rendant l’interface utilisateur de l’application plus mémorable, les utilisateurs finaux s’accèdent plus fréquemment à l’application et Pendant des périodes plus longues.By making the app UI more memorable, end users will engage with the app more frequently and for longer periods.

Que pouvez-vous créer par-dessus ScrollViewer ?What can you build on top of ScrollViewer?

Vous pouvez tirer parti de la position d’un ScrollViewer pour créer un certain nombre d’expériences dynamiques :You can leverage the position of a ScrollViewer to build a number of dynamic experiences:

  • Parallaxe : utilisez la position d’un ScrollViewer pour déplacer le contenu d’arrière-plan ou de premier plan à une vitesse relative à la position de défilement.Parallax – use the position of a ScrollViewer to move background or foreground content at a relative rate to the scroll position.
  • StickyHeaders : utiliser la position d’un ScrollViewer pour animer et « coller » un en-tête à une positionStickyHeaders – use the position of a ScrollViewer to animate and "stick" a header to a position
  • Input-Driven Effects : utilisez la position d’un ScrollViewer pour animer un effet de composition tel qu’un flou.Input-Driven Effects – use the position of a Scrollviewer to animate a Composition Effect such as Blur.

En général, en référençant la position d’un ScrollViewer avec un ExpressionAnimation, vous pouvez créer une animation qui change de façon dynamique la valeur de défilement.In general, by referencing the position of a ScrollViewer with an ExpressionAnimation, you are able to create an animation that dynamically changes relative the scroll amount.

Mode liste avec parallaxe

En-tête discret

Utilisation de ScrollViewerManipulationPropertySetUsing ScrollViewerManipulationPropertySet

Pour créer ces expériences dynamiques à l’aide d’un ScrollViewer XAML, vous devez être en mesure de faire référence à la position de défilement dans une animation.To create these dynamic experiences using a XAML ScrollViewer, you must be able to reference the scroll position in an animation. Pour ce faire, vous accédez à un CompositionPropertySet à partir du ScrollViewer XAML appelé ScrollViewerManipulationPropertySet.This is done by accessing a CompositionPropertySet off of the XAML ScrollViewer called the ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet contient une propriété Vector3 unique appelée translation qui donne accès à la position de défilement de l’ScrollViewer.The ScrollViewerManipulationPropertySet contains a single Vector3 property called Translation that provides access to the scroll position of the ScrollViewer. Vous pouvez ensuite le référencer comme n’importe quel autre CompositionPropertySet dans votre ExpressionAnimation.You can then reference this like any other CompositionPropertySet in your ExpressionAnimation.

Étapes générales de la mise en route :General Steps to getting started:

  1. Accédez au ScrollViewerManipulationPropertySet via ElementCompositionPreview.Access the ScrollViewerManipulationPropertySet via ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Créez un ExpressionAnimation qui fait référence à la propriété translation à partir de PropertySet.Create an ExpressionAnimation that references the Translation property from the PropertySet.
    • N’oubliez pas de définir le paramètre de référence !Don’t forget to set the Reference Parameter!
  3. Ciblez la propriété d’un CompositionObject avec ExpressionAnimation.Target a CompositionObject’s property with the ExpressionAnimation.

Notes

Il est recommandé d’assigner le PropertySet retourné à partir de la méthode GetScrollViewerManipulationPropertySet à une variable de classe.It is recommended that you assign the PropertySet returned from the GetScrollViewerManipulationPropertySet method to a class variable. Cela garantit que le jeu de propriétés n’est pas nettoyé par le garbage collection et, par conséquent, n’a aucun effet sur le ExpressionAnimation dans lequel il est référencé.This ensures that the property set does not get cleaned up by Garbage Collection and thus does not have any effect on the ExpressionAnimation it is referenced in. Les ExpressionAnimations ne maintiennent pas une référence forte à l’un des objets utilisés dans l’équation.ExpressionAnimations do not maintain a strong reference to any of the objects used in the equation.

 ExempleExample

Jetons un coup d’œil sur la façon dont l’exemple parallaxe présenté ci-dessus est regroupé.Let's take a look at how the Parallax sample shown above is put together. Pour référence, tout le code source de l’application se trouve dans Windows UI dev Labs référentiel sur GitHub.For reference, all the source code for the app is found in the Window UI Dev Labs repo on GitHub.

La première chose à faire est d’obtenir une référence au ScrollViewerManipulationPropertySet.The first thing is to get a reference to the ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

L’étape suivante consiste à créer le ExpressionAnimation qui définit une équation qui utilise la position de défilement de l’ScrollViewer.The next step is to create the ExpressionAnimation that defines an equation that utilizes the scroll Position of the 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))";

Notes

Vous pouvez également utiliser les classes d’assistance ExpressionBuilder pour construire cette même expression sans avoir besoin de chaînes :You can also utilize ExpressionBuilder helper classes to construct this same Expression without the need for Strings:

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

Enfin, vous prenez ce ExpressionAnimation et ciblez le visuel que vous souhaitez faire passer à la parallaxe.Finally, you take this ExpressionAnimation and target the Visual that you want to parallax. Dans ce cas, il s’agit de l’image de chacun des éléments de la liste.In this case, it is the image for each of the items in the list.

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