通过

视差

  • 项目

视差是一种视觉效果，在这种效果中，离观看者较近的项目比背景中的项目移动得更快。 视差营造出一种深度感、透视感和运动感。 在 UWP 应用中，可以使用 ParallaxView 控件来创建视差效果。

WinUI API：ParallaxView 类、VerticalShift 属性、HorizontalShift 属性

平台 API：ParallaxView 类、VerticalShift 属性、Horizo​​ntalShift 属性

示例

WinUI 2 库
WinUI 库

如果已安装 WinUI 2 库应用，请单击此处打开此应用，了解 ParallaxView 的实际应用。

Parallax 和 Fluent Design 系统

Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 视差是 Fluent Design System 的一个组件，可为应用添加动态、深度和规模。 要了解详细信息，请参阅 Fluent Design 概述。

如何在用户界面上运行

在 UI 中，当用户界面滚动或平移时，可以通过以不同的速率移动不同的对象来创建视差效果。 要进行演示，请让我们查看两层内容，分别是列表和背景图像。 列表被放置在背景图片的顶部，这就给人一种列表可能离观看者更近的错觉。 现在，为了实现视差效果，我们希望靠我们最近的对象比远处的对象移动得“更快”。 当用户滚动界面时，列表的移动速度要快于背景图片，从而营造出一种有深度的错觉。

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

使用 ParallaxView 控件创建视差效果

要创建视差效果，请使用 ParallaxView 控件。 此控件将前景元素（如列表）的滚动位置与背景元素（如图像）关联到一起。 当你滚动浏览前景元素时，它会将背景元素动画化，形成视差效果。

要使用 ParallaxView 控件，需要提供一个源元素和一个背景元素，并将 VerticalShift（用于垂直滚动）和/或 HorizontalShift（用于水平滚动）属性设置为大于零的值。

  • 源属性获取前景元素的引用。 要实现视差效果，前景应为 ScrollViewer 或包含 ScrollViewer 的元素，如 ListView 或 RichTextBox。

  • 要设置背景元素，可将该元素添加为 ParallaxView 控件的子元素。 背景元素可以是任何 UIElement，例如图像或包含其他 UI 元素的面板。

要创建视差效果，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 中使用视差功能
  • 请勿到处使用它，过度使用可削弱它的影响力