Ulepszanie istniejących doświadczeń ScrollViewer.

W tym artykule wyjaśniono, jak używać programu XAML ScrollViewer i ExpressionAnimations do tworzenia dynamicznych środowisk ruchu opartych na danych wejściowych.

Wymagania wstępne

W tym miejscu przyjęto założenie, że znasz pojęcia omówione w następujących artykułach:

• animacje oparte na danych wejściowych
• animacje oparte na powiązaniach

Dlaczego budować na ScrollViewerze?

Zazwyczaj używasz istniejącego narzędzia XAML ScrollViewer, aby utworzyć przewijaną i powiększalną powierzchnię dla zawartości aplikacji. Teraz, wraz z wprowadzeniem języka Fluent Design, powinieneś również skupić się na sposobie korzystania z przewijania lub powiększania powierzchni, aby napędzać inne doświadczenia ruchu. Na przykład użycie przewijania w celu uruchomienia animacji rozmycia tła lub zmiany pozycji "przyklejonego nagłówka."

W tych scenariuszach korzystasz z zachowań lub doświadczeń manipulacji, takich jak przewijanie i powiększanie, aby inne części aplikacji były bardziej dynamiczne. To z kolei sprawia, że aplikacja wydaje się bardziej spójna, co sprawia, że doświadczenia są bardziej pamiętne w oczach użytkowników końcowych. Czyniąc interfejs użytkownika aplikacji bardziej niezapomnianym, użytkownicy końcowi będą częściej i na dłużej angażować się w aplikację.

Co można utworzyć w górnej części programu ScrollViewer?

Możesz wykorzystać pozycję ScrollViewer w celu utworzenia wielu środowisk dynamicznych:

• Parallax — użyj położenia ScrollViewer, aby przesuwać elementy tła lub pierwszego planu ze względną prędkością w stosunku do pozycji przewijania.
• StickyHeaders — użyj pozycji przesuwnika (ScrollViewer), aby animować i "przymocować" nagłówek w określonej pozycji
• Input-Driven Efekty — użyj pozycji Scrollviewer, aby animować efekt kompozycji, taki jak Rozmycie.

Ogólnie rzecz biorąc, odwołując się do pozycji ScrollViewer za pomocą ExpressionAnimation, można utworzyć animację, która zmienia się dynamicznie w zależności od ilości przewijania.

widok listy z efektem paralaksy

Korzystanie z ScrollViewerManipulationPropertySet

Aby utworzyć te dynamiczne doświadczenia przy użyciu narzędzia XAML ScrollViewer, musisz mieć możliwość odwołania się do położenia przewijania w animacji. Odbywa się to przez uzyskanie dostępu do elementu CompositionPropertySet poza elementem XAML ScrollViewer o nazwie ScrollViewerManipulationPropertySet. Element ScrollViewerManipulationPropertySet zawiera pojedynczą właściwość Vector3 o nazwie Translation, która zapewnia dostęp do położenia przewijania elementu ScrollViewer. Następnie możesz odwołać się do tego jak do dowolnego innego zestawu CompositionPropertySet w swojej ExpressionAnimation.

Ogólne kroki umożliwiające rozpoczęcie pracy:

1. Uzyskaj dostęp do elementu ScrollViewerManipulationPropertySet za pośrednictwem elementu CompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Utwórz element ExpressionAnimation, który odwołuje się do właściwości Translation z zestawu właściwości.
   • Nie zapomnij ustawić parametru odwołania!
3. Określ właściwość obiektu CompositionObject przy użyciu ExpressionAnimation.

Przykład

Przyjrzyjmy się, w jaki sposób skonstruowano pokazany powyżej przykład Parallax. Aby uzyskać informacje ogólne, cały kod źródłowy aplikacji znajduje się w repozytorium Windows UI Dev Labs w witrynie GitHub.

Pierwszą rzeczą jest uzyskanie odwołania do ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Następnym krokiem jest utworzenie ExpressionAnimation, które definiuje równanie korzystające z pozycji przewijania 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;

Na koniec użyj animacji ExpressionAnimation, aby zastosować efekt paralaksy na aspekcie wizualnym, który chcesz wprowadzić. W takim przypadku jest to obraz dla każdego z elementów na liście.

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