Design de Animação Morph de UI

Como uma forma carrega o filme inteiro

O filme dura 14 segundos a 120 BPM, o que as notas da fonte dividem em 7 compassos. Uma única forma começa como um botão Generate e depois vira loader, check, dynamic island, player de música, controle de volume, alternador, indicador de aba, gráfico, paleta de comandos e toast, antes de voltar ao botão.

O custo é que cada estado precisa ser alcançável a partir do anterior apenas redimensionando e rearredondando o mesmo corpo. O conteúdo que não cabe nessa mudança de forma precisa ser descartado ou redesenhado.

Lendo os quadros do player, das abas e da paleta

Três quadros capturados mostram como a mesma forma pode parecer muito diferente. No player, um cartão preto arredondado traz uma miniatura em degradê, “motion study 02”, uma barra de progresso em 0:49 com −2:09 restantes e ícones de anterior, reproduzir e próximo. No quadro das abas, uma pílula branca contém Day, Week e Month, com um indicador preto atrás de Day.

Na paleta, a palavra digitada “frame” leva a dois resultados, “Frame rate · 60fps” e “Every frame is code”, com o primeiro destacado.

01

Estados de reprodução legíveis

Os rótulos de tempo decorrido e restante ficam abaixo da barra de progresso. São conteúdo ilustrativo da interface dentro de um filme de 14 segundos, não a duração do vídeo do showcase. Mantenha os dois rótulos legíveis ao adaptar o player a um canvas menor.

02

O indicador de aba é um objeto em movimento

A pílula preta de Day fica dentro de uma trilha branca enquanto o cursor passa sobre Month. Como o indicador é uma forma separada, ele pode deslizar e se esticar entre os rótulos em vez de trocar o destaque.

03

O texto da paleta combina com o filme

Os resultados “Frame rate · 60fps” e “Every frame is code” falam da própria peça. Reaproveite a ideia, mas troque os textos pelo vocabulário do seu produto.

Construção guiada pelo tempo e seus custos

As notas da fonte descrevem uma única função render(t) que desenha o quadro inteiro a partir do tempo da linha do tempo mestra. Cada valor visível é uma função pura de t, usando eases, springs ou keyframes, e nenhum estado passa de um quadro para outro. Por isso, voltar na reprodução reproduz quadros idênticos.

Isso torna a exportação previsível, mas exige mais de quem cria. Interações que seriam triviais com manipuladores de eventos, como hover ou digitação, precisam ser escritas como keyframes temporizados.

1. Mantenha um único relógio

   A linha do tempo mestra do GSAP é o único relógio. As camadas leem o tempo atual dela em vez de rodar seus próprios temporizadores.

2. Some springs a cada mudança

   As notas de adaptação pedem springs somadas a cada mudança, para que movimentos sobrepostos se misturem em vez de reiniciar.

3. Deixe o cursor causar tudo

   Cada mudança de estado precisa de uma ação do ponteiro antes dela. Sem essa regra, os morphs parecem decoração e não interação.

Fonte e escopo

Esta é uma refação e adaptação oficial em código do OpenDesign de uma peça de motion publicada originalmente por @twoclipping no X. Ela foi reconstruída em código a partir da peça publicada, e a trilha sonora de 14 segundos é uma composição original, não o áudio da fonte. O crédito é uma referência factual e não implica aval do autor original.

Este é um estudo de motion renderizado, não um produto de interface utilizável. O player, o gráfico e a paleta dentro do filme não respondem a interações. O template vem de um fluxo de vídeo proposto do OpenDesign; a disponibilidade depende da versão instalada.

Adaptando o morph ao seu próprio produto

As notas sugerem substituir os estados na definição de SHAPE e seus conteúdos, mantendo as três regras: uma forma que nunca corta, springs somadas a cada mudança e um cursor por trás de cada mudança. Comece listando os cinco estados de produto que você mais precisa mostrar e ordene-os do menor ao maior contêiner.

Mantenha o primeiro e o último estado idênticos se quiser um loop. Se seus estados diferirem muito em tamanho, espere que os quadros intermediários pareçam esticados e reduza o andamento de acordo.