Parallax

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

• Важные API: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

Откройте приложение коллекции WinUI 3 и просмотрите ParallaxView в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Параллакс и система 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.

Recommendations

• Использование параллакса в списках с фоновым изображением
• Рекомендуется использовать параллакс в ListViewItems, если ListViewItems содержит изображение
• Не используйте его везде, чрезмерное использование может уменьшить его влияние

Связанные статьи

• Класс ParallaxView