Paralaxe

  • Artigo

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

APIs WinUI: classe ParallaxView, propriedade VerticalShift, propriedade HorizontalShift

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

Exemplos

Galeria WinUI 2
Galeria 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 Fluent Design System

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 Fluent Design System que adiciona movimento, profundidade e escala ao seu aplicativo. Para saber mais, confira a Visão geral do Fluent Design.

Como funciona em uma interface de usuário

Em uma interface de usuário, você pode criar um efeito de paralaxe movendo objetos diferentes em taxas diferentes quando a IU rola ou se desloca. Para demonstrar, examinaremos duas camadas de conteúdo, uma lista e uma imagem de fundo. A lista é colocada em cima da imagem de fundo, o que já dá a ilusão de que a lista pode estar mais próxima do espectador. Agora, para conseguir o efeito de paralaxe, queremos que o objeto mais próximo de nós viaje "mais rápido" do que o objeto que está mais longe. À medida que o usuário rola a interface, a lista se move a uma taxa mais rápida do 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

Usar o controle ParallaxView para criar um efeito de paralaxe

Para criar um efeito de paralaxe, use o controle ParallaxView. Este controle vincula a posição de rolagem de um elemento do primeiro plano, como uma lista, a um elemento em segundo plano, 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, forneça um elemento Source, um elemento background e defina as propriedades VerticalShift (para rolagem vertical) e/ou HorizontalShift (para rolagem horizontal) como um valor maior que zero.

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

  • Para definir o elemento de segundo plano, adicione esse elemento como um filho do controle ParallaxView. O elemento background pode ser qualquer UIElement, como uma Image ou um painel que contém elementos adicionais da interface do usuário.

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

Este exemplo cria um efeito de 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 funcione para a operação de paralaxe para que você não precise se preocupar com a imagem rolando para fora da exibição.

Personalizar o efeito de paralaxe

As propriedades VerticalShift e HorizontalShift permitem controlar o grau do efeito de paralaxe.

  • A propriedade VerticalShift especifica até onde queremos que o plano de fundo mude verticalmente durante toda a operação de paralaxe. Um valor 0 significa que o plano de fundo não se move.
  • A propriedade HorizontalShift especifica até onde queremos que o plano de fundo mude horizontalmente durante toda a operação de paralaxe. Um valor 0 significa que o plano de fundo não se move.

Valores maiores criam um efeito mais dramático.

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

O que fazer e o que não fazer

  • Usar paralaxe em listas com uma imagem de plano de fundo
  • Considere o uso de paralaxe em ListViewItems quando ListViewItems contiver uma imagem
  • Não o use em todos os lugares, o uso excessivo pode diminuir seu impacto