다음을 통해 공유

기존 ScrollViewer 환경 개선

이 문서에서는 XAML ScrollViewer 및 ExpressionAnimations를 사용하여 동적 입력 기반 동작 환경을 만드는 방법을 설명합니다.

필수 조건

여기서는 다음 문서에서 설명하는 개념을 잘 알고 있다고 가정합니다.

  • 입력 기반 애니메이션
  • 관계 기반 애니메이션

ScrollViewer를 기반으로 빌드하는 이유는 무엇인가요?

일반적으로 기존 XAML ScrollViewer를 사용하여 앱 콘텐츠에 대해 스크롤 가능하고 확대/축소 가능한 화면을 만듭니다. Fluent 디자인 언어가 도입됨에 따라, 이제 화면을 스크롤하거나 확대/축소하는 행위를 통해 다른 움직임 경험을 구동하는 방법에도 집중해야 합니다. 예를 들어, 스크롤을 사용하여 배경의 흐림 효과 애니메이션을 수행하거나 "고정 헤더"의 위치를 조정합니다.

이러한 시나리오에서는 스크롤 및 확대/축소와 같은 동작 또는 조작 환경을 활용하여 앱의 다른 부분을 보다 동적으로 만듭니다. 이를 통해 앱이 더 응집력을 느낄 수 있으므로 최종 사용자의 눈에 더 기억에 남을 수 있습니다. 앱 UI를 더 기억에 남게 함으로써 최종 사용자는 더 자주 그리고 더 오랜 기간 동안 앱에 참여하게 됩니다.

ScrollViewer를 기반으로 무엇을 빌드할 수 있나요?

ScrollViewer의 위치를 활용하여 다양한 동적 환경을 빌드할 수 있습니다.

  • 시차 – ScrollViewer의 위치를 사용하여 스크롤 위치에 상대적인 속도로 배경 또는 전경 콘텐츠를 이동합니다.
  • StickyHeaders – ScrollViewer의 위치를 사용하여 애니메이션 효과를 적용하고 헤더를 위치에 "고정"합니다.
  • Input-Driven 효과 – 스크롤뷰어의 위치를 사용하여 흐림 효과와 같은 컴퍼지션 효과에 애니메이션을 줍니다.

일반적으로 ExpressionAnimation을 사용하여 ScrollViewer의 위치를 참조하면 스크롤 크기를 기준으로 동적으로 변경되는 애니메이션을 만들 수 있습니다.

패럴랙스 사용하여 목록 보기

수줍은 헤더

ScrollViewerManipulationPropertySet 사용

XAML ScrollViewer를 사용하여 이러한 동적 환경을 만들려면 애니메이션에서 스크롤 위치를 참조할 수 있어야 합니다. 이것은 ScrollViewerManipulationPropertySet이라고 불리는 XAML ScrollViewer의 CompositionPropertySet에 액세스하여 수행됩니다. ScrollViewerManipulationPropertySet에는 ScrollViewer의 스크롤 위치에 대한 액세스를 제공하는 Translation이라는 단일 Vector3 속성이 포함되어 있습니다. 그런 다음 ExpressionAnimation의 다른 CompositionPropertySet처럼 참조할 수 있습니다.

시작하는 일반적인 단계:

  1. ElementCompositionPreview를 통해 ScrollViewerManipulationPropertySet에 액세스합니다.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. PropertySet에서 Translation 속성을 참조하는 ExpressionAnimation을 만듭니다.
    • 참조 매개 변수를 설정하는 것을 잊지 마세요.
  3. ExpressionAnimation을 사용하여 CompositionObject의 속성을 대상으로 지정합니다.

비고

GetScrollViewerManipulationPropertySet 메서드에서 반환된 PropertySet을 클래스 변수에 할당하는 것이 좋습니다. 이렇게 하면 속성 집합이 가비지 수집에 의해 정리되지 않으므로 참조되는 ExpressionAnimation에 영향을 주지 않습니다. ExpressionAnimations는 수식에 사용되는 개체에 대한 강력한 참조를 유지하지 않습니다.

예시

위에 나타난 Parallax 샘플이 어떻게 구성되어 있는지 살펴보겠습니다. 참조를 위해 앱의 모든 소스 코드는 GitHubWindow UI Dev Labs 리포지토리에 있습니다.

첫 번째 작업은 ScrollViewerManipulationPropertySet에 대한 참조를 가져오는 것입니다.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

다음 단계는 ScrollViewer의 스크롤 위치를 활용하는 수식을 정의하는 ExpressionAnimation을 만드는 것입니다.

_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))";

비고

또한 ExpressionBuilder 도우미 클래스를 활용하여 문자열 없이도 동일한 식을 생성할 수 있습니다.

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

마지막으로 이 ExpressionAnimation을 사용하여 시차 효과를 적용하고자 하는 시각적 개체를 대상으로 지정합니다. 이 경우 목록의 각 항목에 대한 이미지입니다.

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