Przykładanie ulepszeń do istniejących doświadczeń ScrollViewer

W tym artykule wyjaśniono, jak używać ScrollViewer WinUI XAML oraz ExpressionAnimations do tworzenia dynamicznych i interaktywnych doświadczeń ruchowych 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 relacjach

Dlaczego warto rozwijać projekty bazujące na ScrollViewer?

Zazwyczaj używasz istniejącego narzędzia XAML ScrollViewer, aby utworzyć przewijaną i powiększalną powierzchnię dla zawartości aplikacji. Wraz z wprowadzeniem języka Fluent Design należy teraz również skupić się na tym, jak użycie przewijania lub powiększania powierzchni może inicjować inne interakcje ruchowe. Na przykład użycie przewijania w celu uruchomienia animacji rozmycia tła lub ustalenia pozycji lepkiego nagłówka.

W tych scenariuszach wykorzystujesz zachowania lub doświadczenia manipulacji, takie jak przewijanie i powiększanie, aby inne części aplikacji były bardziej dynamiczne. Dzięki temu aplikacja wydaje się bardziej spójna, sprawiając, że doświadczenia są bardziej zapamiętywalne w oczach użytkowników końcowych. Dzięki temu, że interfejs użytkownika aplikacji będzie bardziej niezapomniany, użytkownicy końcowi będą angażować się w aplikację częściej i na dłużej.

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 pozycji ScrollViewer, aby przenieść zawartość tła lub pierwszego planu z względną szybkością do położenia przewijania.
• StickyHeaders — użyj pozycji ScrollViewer, aby animować i "trzymać" nagłówek w pozycji
• Efekty napędzane przez dane wejściowe — użyj pozycji kontrolki przeglądarki przewijania, 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 dynamicznie zmienia się w stosunku do zakresu przewijania.

Korzystanie z elementu 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 jedną właściwość typu Vector3 o nazwie Translation, która umożliwia dostęp do położenia przewijania elementu ScrollViewer. Następnie możesz odwołać się do tego jak każdy inny CompositionPropertySet w ExpressionAnimation.

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

1. Uzyskaj dostęp do elementu ScrollViewerManipulationPropertySet za pośrednictwem ElementCompositionPreview.
   • 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 referencyjnego!
3. Określanie wartości docelowej właściwości CompositionObject za pomocą kontrolki ExpressionAnimation.

Uwaga / Notatka

Zaleca się przypisanie właściwościSet zwróconej z metody GetScrollViewerManipulationPropertySet do zmiennej klasy. Gwarantuje to, że zestaw właściwości nie zostanie wyczyszczony przez Garbage Collection i w związku z tym nie będzie miał żadnego wpływu na ExpressionAnimation, do którego się odnosi. WyrażeniaAnimacje nie utrzymują silnego odwołania do żadnego z obiektów używanych w równaniu.

Przykład

Przyjrzyjmy się, jak złożono przykład Parallax pokazany powyżej. Do celów referencyjnych 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 wyrażeniaAnimation definiującego równanie korzystające z pozycji przewijania w programie 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))";

Uwaga / Notatka

Możesz również użyć klas pomocnika ExpressionBuilder, aby utworzyć to samo wyrażenie bez konieczności używania ciągów:

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

Na koniec należy użyć tego ExpressionAnimation i przypisać go do obiektu Visual, który chcesz zastosować dla efektu paralaksy. 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);