다음을 통해 공유

시차

  • 아티클

시차는 뷰어에 가까운 항목이 배경에 있는 항목보다 빠르게 움직이는 시각적 효과입니다. 시차는 깊이감, 원근감 및 운동성을 만듭니다. UWP 앱에서 ParallaxView 컨트롤을 사용하여 시차 효과를 만들 수 있습니다.

WinUI API: ParallaxView 클래스, VerticalShift 속성, HorizontalShift 속성

플랫폼 API: ParallaxView 클래스, VerticalShift 속성, HorizontalShift 속성

예제

WinUI 2 갤러리
WinUI 갤러리

WinUI 2 Gallery 앱이 설치된 경우 여기를 클릭하여 앱을 열고 작동 중인 InfoBadge를 확인합니다.

시차 및 Fluent Design 시스템

Fluent 디자인 시스템을 사용하면 조명, 깊이, 움직임, 재질 및 배율이 통합된 선명한 현대식 UI를 만들 수 있습니다. 시차는 동작, 깊이, 배율을 앱에 추가하는 Fluent Design 시스템 구성 요소입니다. 자세한 내용은 Fluent Design 개요를 참조하세요.

사용자 인터페이스에서 작동하는 방식

UI에서 UI가 스크롤하거나 이동할 때 여러 개체를 서로 다른 속도로 움직여서 시차 효과를 만들 수 있습니다. 시험을 보이기 위해 콘텐츠의 두 계층인 목록과 배경 이미지를 살펴보겠습니다. 목록은 이미 목록이 뷰어와 좀 더 가까이 있는 것과 같은 착시 효과를 주는 배경 이미지의 위에 배치됩니다. 이제 시차 효과를 얻기 위해 가까이 있는 개체를 멀리 있는 개체보다 “빠르게” 움직여야 합니다. 사용자가 인터페이스를 스크롤함에 따라 목록이 배경 이미지보다 빠르게 움직여 깊이 효과를 만듭니다.

목록 및 배경 이미지를 사용한 시차의 예

ParallaxView 컨트롤을 사용하여 시차 효과 만들기

시차 효과를 만들려면 ParallaxView 컨트롤을 사용합니다. 이 컨트롤은 목록과 같은 전경 요소의 스크롤 위치를 이미지와 같은 배경 요소에 연결합니다. 전경 요소를 스크롤하면 애니메이션 효과를 배경 요소에 적용하여 시차 효과를 만듭니다.

ParallaxView 컨트롤을 사용하려면 배경 요소인 Source 요소를 제공하고, VerticalShift(세로 스크롤의 경우) 및/또는 HorizontalShift(가로 스크롤의 경우) 속성을 0보다 큰 값으로 설정합니다.

  • Source 속성은 전경 요소에 대한 참조를 사용합니다. 시차 효과가 발생하려면 전경은 ScrollViewer이거나, ScrollViewer가 포함된 요소(예: ListView 또는 RichTextBox)여야 합니다.

  • 배경 요소를 설정하려면 해당 요소를 ParallaxView 컨트롤의 자식으로 추가합니다. 배경 요소는 Image 또는 추가 UI 요소가 포함된 패널과 같은 UIElement일 수 있습니다.

시차 효과를 만들려면 ParallaxView가 전경 요소 뒤에 있어야 합니다. Grid 및 Canvas 패널을 사용하면 ParallaxView 컨트롤에서 원활하게 작동하도록 항목을 서로의 위에 계층화할 수 있습니다.

다음 예제에서는 목록에 대한 시차 효과를 만듭니다.

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 
    
        <!-- Background element --> 
        <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
               Stretch="UniformToFill"/>
    </ParallaxView>
    
    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement">
       <x:String>Item 1</x:String> 
       <x:String>Item 2</x:String> 
       <x:String>Item 3</x:String> 
       <x:String>Item 4</x:String> 
       <x:String>Item 5</x:String>     
       <x:String>Item 6</x:String> 
       <x:String>Item 7</x:String> 
       <x:String>Item 8</x:String> 
       <x:String>Item 9</x:String> 
       <x:String>Item 10</x:String>     
       <x:String>Item 11</x:String> 
       <x:String>Item 13</x:String> 
       <x:String>Item 14</x:String> 
       <x:String>Item 15</x:String> 
       <x:String>Item 16</x:String>     
       <x:String>Item 17</x:String> 
       <x:String>Item 18</x:String> 
       <x:String>Item 19</x:String> 
       <x:String>Item 20</x:String> 
       <x:String>Item 21</x:String>        
    </ListView>
</Grid>

ParallaxView는 이미지 크기를 자동으로 조정하여 이미지가 시차 작업에 맞게 작동하므로 이미지가 보기 밖으로 스크롤하는 것에 대해 걱정할 필요가 없습니다.

시차 효과 사용자 지정

VerticalShift 및 HorizontalShift 속성을 사용하면 시차 효과의 수준을 제어할 수 있습니다.

  • VerticalShift 속성은 전체 시차 작업 중에 배경이 세로로 이동하려는 거리를 지정합니다. 0 값은 배경이 전혀 이동하지 않는다는 의미입니다.
  • HorizontalShift 속성은 전체 시차 작업 중에 배경이 가로로 이동하려는 거리를 지정합니다. 0 값은 배경이 전혀 이동하지 않는다는 의미입니다.

값이 클수록 더 극적인 효과를 만듭니다.

시차를 사용자 지정하는 방법의 전체 목록은 ParallaxView 클래스를 참조하세요.

권장 사항 및 금지 사항

  • 배경 이미지가 있는 목록에서 시차 사용
  • ListViewItems에 이미지가 포함된 경우 ListViewItems에서 시차를 사용하는 것이 좋습니다.
  • 어디서나 사용하지 않습니다. 과도하게 사용하면 효과가 감소할 수 있습니다.