Paralaxe

  • Artigo

Paralaxe é um efeito visual onde os itens mais próximos ao visualizador se movem mais rápido do que itens no plano de fundo. A Paralaxe cria uma sensação de profundidade, perspectiva e movimento. Em um aplicativo UWP, você pode usar o controle ParallaxView para criar um efeito de paralaxe.

APIs da Biblioteca de Interface do Usuário do Windows:classe ParallaxView, propriedade VerticalShift, propriedade HorizontalShift

APIs de plataforma: classe ParallaxView, propriedade VerticalShift, propriedade HorizontalShift

Exemplos

WinUI 2 Gallery
Galeria do WinUI

Se você tiver o aplicativo WinUI 2 Gallery instalado, clique aqui para abrir o aplicativo e ver o ParallaxView em ação.

Paralaxe e o Sistema de Design Fluent

O Sistema de Design Fluente ajuda a criar uma interface do usuário arrojada e moderna que incorpora luz, profundidade, movimento, materiais e escala. Paralaxe é um componente do Sistema de Design Fluent que acrescenta movimento, profundidade e escala ao seu aplicativo. Para saber mais, confira a Visão geral do Fluent Design.

Como ele funciona em uma interface de usuário

Em uma interface de usuário, você pode criar um efeito paralaxe movendo objetos diferentes em diferentes taxas quando a interface de usuário é rolada ou faz um movimento panorâmico. Para demonstrar, vamos examinar duas camadas de conteúdo, uma lista e uma imagem de plano de fundo. A lista é colocada sobre a imagem de fundo, o que já gera a ilusão de que a lista está mais perto para o visualizador. Agora, para obter o efeito paralaxe, queremos que o objeto mais próximo de nós viaje "mais rápido" do que o objeto que está mais distante. Conforme o usuário rola a interface, a lista se move a uma taxa mais rápida que a imagem de fundo, o que cria a ilusão de profundidade.

Um exemplo de paralaxe com uma lista e uma imagem de fundo

Usando o controle ParallaxView para criar um efeito paralaxe

Para criar um efeito paralaxe, use o controle ParallaxView. Esse controle vincula a posição de rolagem de um elemento do primeiro plano, como uma lista, a um elemento de fundo, como uma imagem. Enquanto você navega no elemento do primeiro plano, ele anima o elemento em segundo plano para criar um efeito paralaxe.

Para usar o controle ParallaxView, você fornece um elemento de origem, um elemento de fundo e define as propriedades VerticalShift (para rolagem vertical) e/ou HorizontalShift (para rolagem horizontal) como um valor maior que zero.

  • A propriedade de Origem recebe uma referência do elemento do primeiro plano. Para que o efeito paralaxe ocorra, o primeiro plano deve ser um ScrollViewer ou um elemento que contenha um ScrollViewer, como uma ListView ou uma RichTextBox.

  • Para definir o elemento de fundo, adicione esse elemento como um filho do controle ParallaxView. O elemento de fundo pode ser qualquer UIElement, como uma Imagem ou um painel que contém outros elementos de interface do usuário.

Para criar um efeito paralaxe, o ParallaxView deve estar atrás do elemento do primeiro plano. Os painéis Grade e Tela permitem que você coloque itens um sobre o outro, para que eles funcionem bem com o controle ParallaxView.

Este exemplo cria um efeito paralaxe para uma lista:

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

O ParallaxView ajusta automaticamente o tamanho da imagem para que ela funcione para a operação de paralaxe para que você não precise se preocupar com a imagem rolando para fora da exibição.

Personalizando o efeito paralaxe

As propriedades VerticalShift e HorizontalShift permitem controlar o nível do efeito paralaxe.

  • A propriedade VerticalShift especifica o quanto queremos que a tela de fundo se desloque verticalmente durante toda a operação de paralaxe. Um valor de 0 significa que a tela de fundo não se move.
  • A propriedade HorizontalShift especifica o quanto queremos que a tela de fundo se desloque horizontalmente durante toda a operação de paralaxe. Um valor de 0 significa que a tela de fundo não se move.

Valores maiores criam um efeito mais dramático.

Para obter uma lista completa das maneiras de personalizar a paralaxe, consulte a classe ParallaxView.

O que fazer e o que não fazer

  • Use a paralaxe em listas com uma imagem de fundo
  • Considere usar a paralaxe em ListViewItems quando ListViewItems contêm uma imagem
  • Não o use em todos os lugares, o uso excessivo pode diminuir seu impacto