UC02650 · Construir interfaces e animações interativas

Introdução

Uma interface web moderna não é estática: reage ao utilizador e anima transições para comunicar melhor. Esta UC (25h) ensina a construir interfaces e animações interactivas com as tecnologias da web — HTML, CSS e JavaScript — recorrendo a bibliotecas como GSAP quando necessário. O foco é dar vida às interfaces de forma fluida, performante e acessível, aplicando animação ao serviço da experiência e não como mera decoração.

Tópicos: - Web interactiva (DOM, eventos). - Animação CSS (transitions, keyframes, transform). - Animação com JavaScript (requestAnimationFrame, GSAP, Anime.js). - Scroll e parallax (Intersection Observer, ScrollTrigger). - SVG interactivo. - Performance (60 fps) e acessibilidade (prefers-reduced-motion).

1. Web interactiva

1.1 A tríade HTML/CSS/JS

A interactividade surge quando o JS reage a eventos e manipula o DOM (frequentemente alterando classes que o CSS anima).

1.2 O DOM

O DOM (Document Object Model) representa a página como uma árvore de nós manipulável por JS:

const titulo = document.querySelector('h1');
titulo.textContent = 'Olá!';
titulo.classList.add('destaque');
titulo.style.color = 'tomato';

Selectores comuns: querySelector (primeiro), querySelectorAll (todos), getElementById.

1.3 Eventos

A interacção assenta em event listeners:

const botao = document.querySelector('.botao');
botao.addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

1.4 Padrão recomendado: classe + CSS

Boa arquitectura: o JS alterna estados (classes) e o CSS trata da animação.

menu.classList.toggle('aberto');

.menu { transform: translateX(-100%); transition: transform .3s ease; }
.menu.aberto { transform: translateX(0); }

Vantagem: separa lógica de aparência, e a animação corre no compositor (performante).

2. Animação CSS

2.1 Transitions

Uma transition anima suavemente a mudança de uma propriedade entre dois estados:

.botao {
  background: #4F46E5;
  transform: translateY(0);
  transition: background .3s ease, transform .2s ease;
}
.botao:hover {
  background: #4338CA;
  transform: translateY(-2px);
}

Sintaxe: transition: propriedade duração easing atraso;. Ideal para estados (hover, focus, active).

2.2 Keyframes e animation

Para sequências com várias etapas:

@keyframes entrar {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card {
  animation: entrar .5s ease-out forwards;
}

Propriedades de animation: name duration timing-function delay iteration-count direction fill-mode.

2.3 Transform

transform é central por ser performante (corre na GPU, sem reflow):

2.4 Easing

A timing-function define a sensação: - ease-out: entradas (responsivo). - ease-in: saídas. - ease-in-out: contínuo. - cubic-bezier(...): curvas personalizadas. - Evitar linear (mecânico).

2.5 Propriedades performantes

Regra de ouro: animar transform e opacity sempre que possível.

3. Animação com JavaScript

3.1 Quando recorrer a JS

O CSS resolve a maioria. Usa-se JS quando é preciso: - Sincronizar várias animações (timelines). - Reagir a lógica ou dados. - Controlo fino de progresso (ligado a scroll, arrasto, tempo).

3.2 requestAnimationFrame

Base de animação por JS, sincronizada com o refresh do ecrã:

let x = 0;
function loop() {
  x += 2;
  caixa.style.transform = `translateX(${x}px)`;
  if (x < 300) requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Vantagens sobre setInterval: corre a ~60 fps, pausa em abas inactivas, mais suave.

3.3 GSAP

GSAP (GreenSock) é a biblioteca de animação web mais usada:

gsap.to('.caixa', { x: 200, rotation: 360, duration: 1, ease: 'power2.out' });
gsap.from('.titulo', { y: 50, opacity: 0, duration: 0.8 });

• to (anima para), from (anima a partir de), fromTo.
• Easing avançado, performante, consistente entre browsers.

3.4 Timelines

As timelines orquestram sequências:

const tl = gsap.timeline({ defaults: { duration: 0.6 } });
tl.from('.logo',  { y: -30, opacity: 0 })
  .from('.menu',  { opacity: 0 }, '-=0.3')   // sobrepõe 0.3 s
  .from('.hero',  { scale: 0.9, opacity: 0 });

Controlo do timing relativo (+=, -=), play/pause/reverse. Alternativa leve: Anime.js.

4. Scroll e parallax

4.1 Animações por scroll

Disparar animações conforme o utilizador desce a página revela conteúdo progressivamente e cria narrativa visual (scrollytelling). Elementos entram com fade/slide, números contam, secções fixam-se.

4.2 Intersection Observer

API nativa e eficiente para saber quando um elemento entra/sai do viewport (sem ouvir scroll continuamente):

const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visivel');
      obs.unobserve(e.target); // animar só uma vez
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.reveal').forEach(el => obs.observe(el));

.reveal { opacity: 0; transform: translateY(30px); transition: .6s ease; }
.reveal.visivel { opacity: 1; transform: translateY(0); }

4.3 Parallax

O parallax desloca camadas a velocidades diferentes para criar profundidade (o fundo mais lento que o primeiro plano). Usar com moderação: em excesso enjoa e pesa. Pode fazer-se com transform ligado ao scroll.

4.4 ScrollTrigger (GSAP)

Plugin que liga animações ao scroll com precisão:

gsap.registerPlugin(ScrollTrigger);
gsap.to('.faixa', {
  x: -1000,
  scrollTrigger: {
    trigger: '.galeria',
    start: 'top top',
    end: '+=2000',
    scrub: true,   // progresso ligado ao scroll
    pin: true      // fixa a secção durante a animação
  }
});

Permite scroll horizontal, pin, scrub e markers para debug.

5. SVG interactivo

5.1 Porquê SVG

O SVG é gráfico vectorial em XML: - Escalável sem perder qualidade (nítido em qualquer ecrã). - Estilizável com CSS (cada forma é um elemento do DOM). - Animável e leve (ícones, ilustrações, logótipos).

5.2 Line drawing

Animar o traço de um SVG (efeito de "desenho"):

.traco {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: desenhar 2s ease forwards;
}
@keyframes desenhar { to { stroke-dashoffset: 0; } }

5.3 Morphing e micro-animações

• Morphing: transição entre formas (ex: ícone de menu ↔ X), com GSAP MorphSVG ou interpolação de paths.
• Micro-animações: ícones reactivos (coração que pulsa, check que aparece).

5.4 Lottie

Lottie reproduz animações vectoriais complexas criadas em After Effects e exportadas em JSON (via plugin Bodymovin): - Nítidas, leves e controláveis por JS. - Ideais para loaders, ilustrações animadas e ícones ricos.

6. Performance e acessibilidade

6.1 O alvo: 60 fps

Movimento fluido exige 60 fps (~16,7 ms por frame). Para o conseguir: - Animar transform e opacity. - Evitar layout thrashing (ler e escrever o DOM alternadamente num loop). - Medir no painel Performance e na overlay de FPS do DevTools.

6.2 will-change

.elemento { will-change: transform; }

Avisa o browser para preparar a optimização. Usar com moderação e idealmente só enquanto a animação corre — em excesso consome memória e piora o desempenho.

6.3 prefers-reduced-motion

Acessibilidade obrigatória: respeitar quem desativou animações (algumas pessoas sentem náuseas/desconforto):

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

6.4 Boas práticas

• Animação com propósito (clareza, feedback, orientação), não decoração.
• Não animar tudo em simultâneo (sobrecarrega e distrai).
• A interface deve funcionar sem animação (progressive enhancement).
• Testar em dispositivos modestos e com ligações lentas.
• Manter durações curtas (150-400 ms na maioria).

Conclusão

Construir interfaces e animações interactivas é unir estrutura (HTML), estilo e animação (CSS) e comportamento (JS/GSAP) para criar experiências vivas. A chave é animar as propriedades certas (transform/opacity), usar as ferramentas adequadas (CSS para estados, GSAP/ScrollTrigger para sequências e scroll), e nunca esquecer performance (60 fps) e acessibilidade (prefers-reduced-motion). Animação bem feita guia, informa e encanta — sem nunca atrapalhar.