Параллакс

  • Статья

Параллакс — это визуальный эффект, в котором элементы ближе к средству просмотра перемещаются быстрее, чем элементы в фоновом режиме. Параллакс создает ощущение глубины, перспективы и движения. В приложении UWP можно использовать элемент управления ParallaxView для создания эффекта параллакса.

API WinUI: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

API платформы: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

Примеры

Коллекция WinUI 2
Коллекция WinUI

Если у вас установлено приложение коллекции WinUI 2, щелкните здесь, чтобы открыть приложение и просмотреть ParallaxView в действии.

Параллакс и система Fluent Design

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Parallax — это компонент система Fluent Design, который добавляет движение, глубину и масштабирование в приложение. См. сведения о системе проектирования Fluent Design.

Как он работает в пользовательском интерфейсе

В пользовательском интерфейсе можно создать эффект параллакса, перемещая различные объекты с разными скоростями при прокрутке пользовательского интерфейса или сдвигах. Чтобы продемонстрировать, рассмотрим два уровня содержимого, список и фоновое изображение. Список помещается поверх фонового изображения, который уже дает иллюзию, что список может быть ближе к зрителю. Теперь, чтобы достичь эффекта параллакса, мы хотим, чтобы объект, ближайший к нам, путешествовал "быстрее", чем объект, который находится дальше. По мере прокрутки интерфейса список перемещается быстрее, чем фоновое изображение, которое создает иллюзию глубины.

Пример эффекта параллакса со списком и фоновым изображением

Использование элемента управления ParallaxView для создания эффекта параллакса

Чтобы создать эффект параллакса, используйте элемент управления ParallaxView . Этот элемент управления связывает положение прокрутки элемента переднего плана, например списка, с фоновым элементом, например изображением. При прокрутке элемента переднего плана он анимирует фоновый элемент, создавая эффект параллакса.

Чтобы использовать элемент управления ParallaxView, укажите элемент Source, фоновый элемент и задайте для свойств VerticalShift (для вертикальной прокрутки) и (или) HorizontalShift (для горизонтальной прокрутки) значение больше нуля.

  • Свойство Source принимает ссылку на элемент переднего плана. Для того чтобы эффект параллакса происходил, передний план должен быть scrollViewer или элемент, содержащий ScrollViewer, например ListView или RichTextBox.

  • Чтобы задать фоновый элемент, добавьте этот элемент в качестве дочернего элемента элемента управления ParallaxView. Фоновый элемент может быть любым UIElement, например изображением или панелью, содержащей дополнительные элементы пользовательского интерфейса.

Чтобы создать эффект параллакса, параметр ParallaxView должен находиться за элементом переднего плана. Панели "Сетка " и "Холст " позволяют слоить элементы поверх друг друга, поэтому они хорошо работают с элементом управления 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 содержит изображение
  • Не используйте его везде, чрезмерное использование может уменьшить его влияние