Udostępnij przez

Parallax

Parallax to efekt wizualny, w którym elementy bliżej osoby przeglądającego poruszają się szybciej niż elementy w tle. Parallax tworzy uczucie głębokości, perspektywy i ruchu. W aplikacji XAML możesz użyć kontrolki ParallaxView, aby utworzyć efekt parallax.

Otwórz aplikację Galeria WinUI 3 i zobacz ParallaxView w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Parallax i system Fluent Design

System Fluent Design ułatwia tworzenie nowoczesnego, odważnego interfejsu użytkownika, który zawiera światło, głębokość, ruch, materiał i skalę. Parallax to składnik systemu Fluent Design, który dodaje ruch, głębokość i skalowanie do aplikacji. Aby dowiedzieć się więcej, zobacz Omówienie usługi Fluent Design.

Jak to działa w interfejsie użytkownika

W interfejsie użytkownika można utworzyć efekt parallax, przenosząc różne obiekty o różnych szybkościach, gdy interfejs użytkownika przewija lub przesuwa. Aby zademonstrować, przyjrzyjmy się dwóm warstwom zawartości, liście i obrazowi tła. Lista znajduje się na górze obrazu tła, który już daje iluzję, że lista może być bliżej widza. Teraz, aby osiągnąć efekt paralaksu, chcemy, aby obiekt znajdujący się najbliżej nas podróżował "szybciej" niż obiekt, który jest dalej. Gdy użytkownik przewija interfejs, lista jest szybciej przesuwana niż obraz tła, co tworzy iluzję głębokości.

Przykład parallax z listą i obrazem tła

Używanie kontrolki ParallaxView do utworzenia efektu parallax

Aby utworzyć efekt parallax, należy użyć kontrolki ParallaxView . Ta kontrolka łączy położenie przewijania elementu pierwszego planu, takiego jak lista, do elementu tła, takiego jak obraz. Podczas przewijania elementu pierwszego planu animuje element tła w celu utworzenia efektu parallax.

Aby użyć kontrolki ParallaxView, należy podać element Source, element tła i ustawić element VerticalShift (na potrzeby przewijania pionowego) i/lub HorizontalShift (na potrzeby przewijania poziomego) właściwości na wartość większą niż zero.

  • Właściwość Source przyjmuje odwołanie do elementu pierwszego planu. Aby efekt paralaksu wystąpił, pierwszy plan powinien być elementem ScrollViewer lub elementem zawierającym program ScrollViewer, taki jak ListView lub RichTextBox.
  • Aby ustawić element tła, należy dodać ten element jako element podrzędny kontrolki ParallaxView. Element tła może być dowolnym elementem interfejsu użytkownika, takim jak obraz lub panel zawierający dodatkowe elementy interfejsu użytkownika.

Aby utworzyć efekt parallax, element ParallaxView musi znajdować się za elementem pierwszego planu. Panele Siatki i kanwy umożliwiają warstwowanie elementów nawzajem, dzięki czemu działają dobrze z kontrolką ParallaxView.

W tym przykładzie zostanie utworzony efekt parallax dla listy:

<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>

Element ParallaxView automatycznie dostosowuje rozmiar obrazu, dzięki czemu działa w przypadku operacji parallax, dzięki czemu nie musisz martwić się o przewinięcie obrazu z widoku.

Dostosowywanie efektu parallax

Właściwości VerticalShift i HorizontalShift pozwalają kontrolować stopień efektu paralaksu.

  • Właściwość VerticalShift określa, jak daleko chcemy, aby tło było przesuwane w pionie podczas całej operacji parallax. Wartość 0 oznacza, że tło w ogóle nie jest przenoszone.
  • Właściwość HorizontalShift określa, jak daleko chcemy, aby tło było przesuwane w poziomie podczas całej operacji parallax. Wartość 0 oznacza, że tło w ogóle nie jest przenoszone.

Większe wartości tworzą bardziej dramatyczny efekt.

Aby uzyskać pełną listę sposobów dostosowywania parallax, zobacz klasę ParallaxView.

Rekomendacje

  • Używanie parallax na listach z obrazem tła
  • Rozważ użycie parallax w listViewItems, gdy element ListViewItems zawiera obraz
  • Nie używaj go wszędzie, nadmierne wykorzystanie może zmniejszyć jego wpływ

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

  • Last updated on