Por que isso é importante

Efeitos líquidos, distorções de luz e glassmorphism estão redefinindo como apps de ponta dialogam com o usuário. Dominar Skia permite criar animações de alto impacto visual nativamente em iOS e Android, elevando interações, retenção e diferencial de produto sem depender de hacks web. Aprenda agora o que separa protótipos comuns de experiências memoráveis no mobile.

Crie Formas Líquidas com Skia e SDF

Moldar geometria líquida começa com SDFs: para cada pixel, calcule a distância à borda da forma. O valor positivo indica fora, negativo dentro. Para um círculo: distância até o centro menos o raio. Botões e grupos de elementos podem se tornar orgânicos mesclando círculo e retângulo arredondado com o Smooth Minimum – eles literalmente se fundem, criando aquele efeito “gota” de vidro líquido.

ℹ️Atenção

Smooth Minimum define o grau de mistura. Ajuste o parâmetro para experimentar diferentes viscosidades e fluidez sem reescrever toda a lógica.

Filtre com Backdrop e Blend: O Truque do Glassmorphism

Ao contrário do web, aqui o filtro atua no que está atrás da forma, não sobre ela. Use blend modes como Source In e Source Over para cortar, mesclar e colorir apenas onde sua forma líquida toca, criando aquele desfoque realista “só onde deve”.

⚠️Atenção

O filtro de blur nativo do Skia entrega performance superior ao que se consegue manualmente via shader. Abuse dele onde o efeito exigir suavidade máxima.

Shaders: Luz, Distorção e Física Ótica

Shaders em Skia são usados não apenas para cor, mas para deformar e simular passagem de luz por líquidos e vidros. Mapas de deslocamento surgem aqui: uma imagem controla, pixel a pixel, quanto o conteúdo subjacente deve ser “puxado” pelos eixos X e Y, definindo refração, aberração cromática, pulsos ou até caos orgânico.

❌Atenção

Nem todo browser/webview suporta filtros de imagem personalizados como SVG ou CSS filter do jeito que o Skia permite nativo. No mobile, vá de Skia para total poder visual e velocidade.

Smooth Minimum: A Chave da Mistura Orgânica

O segredo dos contornos suaves é a função Smooth Minimum. Tire “quinas” entre as formas, dando aquele acabamento de fluido. K define o quanto a fusão é pronunciada – brinque até achar o “ponto viscoso” perfeito para seu design.

Construindo Mapas de Deslocamento: Como a Luz se Distorce

Defina uma imagem (ou crie dinamicamente via shader) onde cada cor indica o quanto a imagem base será movida em X e Y. 0.5 significa neutro, abaixo disso desloca negativamente e acima, positivamente. Use o gradiente da SDF para modelar o comportamento ótico de um vidro ou água curva.

Refração Realista: Inspirada na Matemática

Shaders herdados do ShaderToy – como “liquid glass” – se baseiam no índice de refração, espessura e superfície da forma. O resultado são efeitos profundos que lembram óleo, lágrima ou gota de mercúrio. Mude a física para buscar o visual ideal ao app.

Snapshot View: Integrando o Conteúdo Nativo em Real-Time

Quer aplicar efeitos líquidos até sobre views nativas do sistema? Snapshot View transforma qualquer parte da tela em textura acessível pelo Skia, permitindo aplicar filtros ao vivo inclusive durante animações – e não só em conteúdo estático.

Interatividade: Efeitos Que Respondem ao Toque

Com SDF, blend e shader, você pode fazer formas líquidas responderem à posição do toque, animarem entre estados ou moldarem o conteúdo filtrado conforme arrasta, pressiona ou libera um botão. Experiência imersiva é construída assim.

Skin Glass: Da Física ao Look Inspiração Apple

O Liquid Glass no iOS é referência: foco nos detalhes de transmissão, cor da borda, opacidade e reflexos. Inspire-se, mas crie sua própria “assinatura líquida”. Busque o “wow” sem sacrificar performance ou a clareza da interface.

Migrando Shaders: Do Three.js e Web para o Mobile

Muitos shaders de vidro e líquidos populares (como o Material de Transmissão do Three.js) podem ser adaptados para Skia. Por vezes, o resultado é mais ágil e convincente no mobile do que no WebGL ou Canvas, graças ao motor gráfico nativo.

Estratégias para Complexidade: Combine Simples e Avançado

Misture SDFs, mapas de deslocamento e blend modes para criar desde pequenas gotas até superfícies inteiras de vidro líquido. Simplicidade na estruturação, ousadia na combinação. Não limite seu app à experiência “normal”.

Erros Comuns: Onde a Galera Tropeça

Usar shader como filtro de blur pode ser tentador, mas resultados e performance são limitados frente ao blur nativo. Outro erro: tentar replicar técnicas web puro em mobile sem explorar recursos nativos – bloqueia inovações visuais.

Além do Design: Domine a Narrativa Visual do Mobile

Quem consegue alinhar matemática visual, engine nativa e UX interativo cria apps que se destacam de verdade. O que era impossível antes, agora é “push to prod”. Sua criatividade só tem limite na combinação dessas técnicas.

✅Atenção

Para aprender todos os frameworks envolvidos, inscreva-se e acompanhe o canal Dev Doido: todas as semanas, receitas inovadoras em React, Skia e além.

React Native Skia: Água Líquida Realista no Seu App