Améliorer les expériences ScrollViewer existantes
Cet article explique comment utiliser un ScrollViewer XAML et ExpressionAnimations pour créer des expériences de mouvement dynamiques pilotées par les entrées.
Prérequis
Ici, nous partons du principe que vous connaissez les concepts abordés dans ces articles :
Pourquoi s’appuyer sur ScrollViewer ?
En règle générale, vous utilisez le ScrollViewer XAML existant pour créer une surface de défilement et zoomable pour le contenu de votre application. Avec l’introduction du langage Fluent Design, vous devez maintenant vous concentrer sur l’utilisation de l’acte de défilement ou de zoom d’une surface pour piloter d’autres expériences de mouvement. Par exemple, à l’aide du défilement pour piloter une animation floue d’un arrière-plan ou de la position d’un « en-tête collant ».
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 les autres parties de votre application plus dynamiques. Celles-ci permettent à l’application de se sentir plus cohérente, ce qui rend les expériences plus mémorables aux yeux des utilisateurs finaux. En rendant l’interface utilisateur de l’application plus mémorable, les utilisateurs finaux s’engagent avec l’application plus fréquemment et plus longtemps.
Que pouvez-vous créer en haut de ScrollViewer ?
Vous pouvez tirer parti de la position d’un ScrollViewer pour créer un certain nombre d’expériences dynamiques :
- Parallax : utilisez la position d’un ScrollViewer pour déplacer l’arrière-plan ou le contenu au premier plan à un taux relatif à la position de défilement.
- StickyHeaders : utilisez la position d’un ScrollViewer pour animer et « coller » un en-tête à une position
- Effets pilotés par l’entrée : utilisez la position d’un scrollviewer pour animer un effet de composition tel que flou.
En général, en référençant la position d’un ScrollViewer avec expressionAnimation, vous pouvez créer une animation qui change dynamiquement la quantité de défilement.
Utilisation de ScrollViewerManipulationPropertySet
Pour créer ces expériences dynamiques à l’aide d’un ScrollViewer XAML, vous devez être en mesure de référencer la position de défilement dans une animation. Pour ce faire, accédez à un CompositionPropertySet à partir du ScrollViewer XAML appelé ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet contient une propriété Vector3 unique appelée Translation qui fournit l’accès à la position de défilement du ScrollViewer. Vous pouvez ensuite référencer cela comme n’importe quel autre CompositionPropertySet dans votre ExpressionAnimation.
Étapes générales de prise en main :
- Accédez à ScrollViewerManipulationPropertySet via ElementCompositionPreview.
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
- Créez une ExpressionAnimation qui fait référence à la propriété Translation à partir de PropertySet.
- N’oubliez pas de définir le paramètre de référence !
- Ciblez la propriété d’un Objet CompositionObject avec ExpressionAnimation.
Remarque
Il est recommandé d’affecter l’ensemble de propriétés retourné par la méthode GetScrollViewerManipulationPropertySet à une variable de classe. Cela garantit que le jeu de propriétés n’obtient pas propre mis en place par garbage collection et n’a donc aucun effet sur l’ExpressionAnimation dans lequel il est référencé. ExpressionAnimations ne conservent pas de référence forte à l’un des objets utilisés dans l’équation.
Exemple
Examinons comment l’exemple Parallax présenté ci-dessus est mis en place. Pour référence, tout le code source de l’application se trouve dans le référentiel Windows UI Dev Labs sur GitHub.
La première chose est d’obtenir une référence à ScrollViewerManipulationPropertySet.
_scrollProperties =
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);
L’étape suivante consiste à créer l’ExpressionAnimation qui définit une équation qui utilise la position de défilement du 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))";
Remarque
Vous pouvez également utiliser des classes d’assistance ExpressionBuilder pour construire cette même expression sans avoir besoin de chaînes :
var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>(); var parallaxValue = 0.5f; var parallax = (scrollPropSet.Translation.Y + startOffset); _parallaxExpression = parallax * parallaxValue - parallax;
Enfin, vous prenez cette ExpressionAnimation et ciblez le visuel que vous souhaitez parallax. Dans ce cas, il s’agit de l’image de chacun des éléments de la liste.
Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);