视差Parallax

视差是一种视觉效果,即靠近观察者的物体比背景中的物体移动得更快。Parallax is a visual effect where items closer to the viewer move faster than items in the background. 视差可产生一种深度、透视和移动感。Parallax creates a feeling of depth, perspective, and movement. 在 UWP 应用中,你可以使用 ParallaxView 控件来创建视差效果。In a UWP app, you can use the ParallaxView control to create a parallax effect.

WINDOWS UI 库 api: ParallaxView 类VerticalShift 属性HorizontalShift 属性Windows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

平台 apiParallaxView 类VerticalShift 属性HorizontalShift 属性Platform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

示例Examples

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果你已安装了 XAML 控件库应用,单击此处打开此应用,了解 ParallaxView 的实际应用If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

视差和 Fluent 设计系统Parallax and the Fluent Design System

Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 视差是 Fluent 设计系统的一个组成部分,它将动画、深度和比例添加到你的应用。Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. 若要了解详细信息,请参阅 Fluent Design 概述To learn more, see the Fluent Design overview.

它在用户界面中的工作原理How it works in a user interface

在 UI 中,你可以在 UI 滚动或平移时,通过以不同的速率移动不同的对象来创建视差效果。In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. 为了说明这一点,让我们看看两层内容:列表和背景图像。To demonstrate, let's look at two layers of content, a list and a background image. 该列表位于该背景图像的顶部,这已经给人以列表可能靠观察者更近的错觉。The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. 现在,若要实现视差效果,我们希望对象离我们最近的对象比远离远处的对象 "快速"。Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. 当用户滚动界面时,列表比背景图像移动得更快,从而产生深度错觉。As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

一个列表和背景图像的视差示例

使用 ParallaxView 控件创建视差效果Using the ParallaxView control to create a parallax effect

要创建视差效果,你可以使用 ParallaxView 控件。To create a parallax effect, you use the ParallaxView control. 该控件将前景元素(如列表)的滚动位置与背景元素(如图像)关联到一起。This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. 当你滚动前景元素时,它会为背景元素创建动画以创建视差效果。As you scroll through the foreground element, it animates the background element to create a parallax effect.

要使用 ParallaxView 控件,你需要提供源元素、背景元素,并将 VerticalShift(针对垂直滚动)和/或 HorizontalShift(针对水平滚动)属性设置为大于零的值。To use the ParallaxView control, you provide a Source element, a background element, and set the VerticalShift (for vertical scrolling) and/or HorizontalShift (for horizontal scrolling) properties to a value greater than zero.

  • 源属性参考前景元素。The Source property takes a reference to the foreground element. 为了让视差效果出现,前景应为 ScrollViewer 或一个包含 ScrollViewer 的元素,例如 ListViewRichTextBoxFor the parallax effect to occur, the foreground should be a ScrollViewer or an element that contains a ScrollViewer, such as a ListView or a RichTextBox.

  • 要设置背景元素,你需要将该元素添加为 ParallaxView 控件的子元素。To set the background element, you add that element as a child of the ParallaxView control. 背景元素可以是任何 UIElement,如图像或包含其他 UI 元素的面板。The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

要创建视差效果,ParallaxView 必须位于前景元素之后。To create a parallax effect, the ParallaxView must be behind the foreground element. 网格画布面板让你能够以相互叠加的形式放置项目,以便它们与 ParallaxView 控件很好地配合使用。The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

该示例创建了列表的视差效果:This example creates a parallax effect for a list:

<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 自动调整图像的大小,使其适用于视差操作,因此无需担心图像滚动出视图。The ParallaxView automatically adjusts the size of the image so it works for the parallax operation so you don't have to worry about the image scrolling out of view.

自定义视差效果Customizing the parallax effect

VerticalShift 和 HorizontalShift 属性让你可以控制视差效果的程度。The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • VerticalShift 属性指定在整个视差操作期间,我们想要背景垂直移动多远。The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. 值0表示背景不会移动。A value of 0 means the background doesn't move at all.
  • HorizontalShift 属性指定在整个视差操作期间,我们想要背景水平移动多远。The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. 值0表示背景不会移动。A value of 0 means the background doesn't move at all.

更大的值可创建更显著的效果。Larger values create a more dramatic effect.

有关自定义视差方式的完整列表,请参阅 ParallaxView 类。For the complete list of ways to customize parallax, see the ParallaxView class.

应做事项和禁止事项Do's and don'ts

  • 在有背景图像的列表中使用视差Use parallax in lists with a background image
  • 当 ListViewItems 包含图像时,考虑在 ListViewItems 中使用视差Consider using parallax in ListViewItems when ListViewItems contain an image
  • 请勿在任何地方使用它,过度使用会降低其影响Don't use it everywhere, overuse can diminish its impact