Wipes e transições
Esconder uma imagem e mostrar outra atrás de uma borda animada, feita de uma linha reta, uma forma ou um padrão.
Cards
Um exemplo ao vivo para ajustar, aprender e copiar.
Como funciona
Um wipe troca uma imagem por outra atrás de uma borda que se move: o próximo slide de uma apresentação entrando pela esquerda, a tela de carregamento de um jogo se fechando num círculo, um painel de menu revelado de cima para baixo. Todo wipe tem as mesmas duas partes. Uma forma dá um número a cada pixel, a posição dele na ordem da revelação. Um progresso de 0 a 1 percorre esses números, e todo pixel cujo número ficou para trás do progresso aparece.
A forma decide o visual
A forma é qualquer função do UVUma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela. Coordenadas UV Uma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela. Campo de distância com sinal (SDF) Uma função que devolve a distância de um ponto até a borda de uma forma, negativa dentro e positiva fora. O zero é o próprio contorno. Ruído Uma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível.uv = gl_FragCoord.xy / resolutionpolar) dá um wipe de relógio, e uma distância com sinalUma função que devolve a distância de um ponto até a borda de uma forma, negativa dentro e positiva fora. O zero é o próprio contorno.circle(p) = |p| − r até uma
estrela ou um losango faz essa forma crescer. Um valor de ruídoUma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível.fract antes e rodar a forma em cada ladrilho dá as persianas e
os quadriculados dos editores de vídeo antigos.
A borda e o ritmo
Comparar a forma com o progresso usando Smoothstep Um limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas. Easing Uma curva que entorta um progresso de 0 a 1 para que o movimento acelere ou desacelere em vez de andar em velocidade constante.step dá uma borda dura, que vira uma escadinha numa diagonal. Um
smoothstepUm limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)ease-in-out: e = p² (3 − 2p)
Para onde vai o resultado
O resultado do wipe é uma máscara: 1 onde a imagem nova aparece, 0 onde a antiga ainda está. Num elemento de interface
ou num sprite, a máscara é o alfa do elemento. Entre duas cenas inteiras, ela é o fator de mistura entre duas imagens, o
que exige que as duas cenas existam como texturas ao mesmo tempo: o quadro antigo guardado num
render targetUma textura em que um desenho escreve no lugar da tela, para uma passada seguinte ler o resultado. Blur, bloom e todo efeito com várias passadas usam isso. Render target Uma textura em que um desenho escreve no lugar da tela, para uma passada seguinte ler o resultado. Blur, bloom e todo efeito com várias passadas usam isso. Cadeia de pós-processamento Passadas de tela cheia rodadas em ordem sobre o quadro pronto, cada uma lendo a imagem que a anterior escreveu. Bloom, tone mapping e correção de cor ficam aqui.
Leitura complementar
- Easing Functions Cheat Sheet (abre em uma nova aba)Referência
- <easing-function> (abre em uma nova aba)Documentação
- Useful little functions (abre em uma nova aba)Artigo
- atan (abre em uma nova aba)Referência
- Polar coordinate system (abre em uma nova aba)Referência
- Shapes (abre em uma nova aba)Livro
- 2D distance functions (abre em uma nova aba)Artigo
- Signed distance function (abre em uma nova aba)Referência
- step (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- Shaping functions (abre em uma nova aba)Livro
- Framebuffers (abre em uma nova aba)Artigo
- Bloom (abre em uma nova aba)Artigo
- Custom post-processing (abre em uma nova aba)Documentação
- dot (abre em uma nova aba)Referência
- mix (abre em uma nova aba)Referência
- radians (abre em uma nova aba)Referência
- CanvasItem shaders (abre em uma nova aba)Documentação