⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Curva de atenuação padrão do Material Design

Projete uma função de temporização CSS cube-bezier() personalizada arrastando dois pontos de controle, visualize-a ao vivo em uma referência linear e copie o valor pronto.

Arraste a alça laranja (P1) e a alça vermelha (P2) para remodelar a curva – as teclas de seta também funcionam. X permanece preso entre 0 e 1 conforme exigido pelo CSS; arraste uma alça acima ou abaixo da caixa para enviar y além desse intervalo para efeitos de ultrapassagem e salto.

Sua curva

Linear (para comparação)

Processando... 0%

Resultado

Esta página abre o gerador com x1=0,4, y1=0, x2=0,2, y2=1 já carregado — a curva de atenuação padrão publicada nas diretrizes de movimento do Material Design do Google. Arraste a alça ou edite os números e a curva, a visualização ao vivo e a atualização CSS copiável juntos.

O Material Design chama essa curva de "flexibilização padrão" e a recomenda para a maioria das transições na tela - elementos que já estão visíveis e simplesmente se movem, redimensionam ou desaparecem na mesma tela. Sua forma acelera rapidamente e depois desacelera suavemente até o lugar, e é por isso que tantos aplicativos Android e UIs da web com estilo Material compartilham a mesma sensação de transição sem que ninguém perceba que estão usando os mesmos quatro números.

Coloque-o diretamente na função de tempo de transição ou na função de tempo de animação para obter uma sensação consistente com o material ou use-o como um ponto de referência: as diretrizes do material também definem curvas separadas de "desaceleração" e "aceleração" para elementos que entram ou saem da tela, que esta curva padrão única não se destina a substituir.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Editor de curva SVG arrastável com duas alças (P1 e P2) além de entradas de números x1/y1/x2/y2 editáveis para valores com precisão de pixel.
  • Visualização da animação em loop comparando seu tempo cúbico-bezier() personalizado com uma bola de referência linear, para que você possa ver a atenuação, não apenas lê-la.
  • String copiável de bezier cúbico (x1, y1, x2, y2) pronta para função de tempo de transição ou função de tempo de animação, além de páginas predefinidas para facilidade de entrada, salto e curva padrão do Material Design.

Principais benefícios

✓ Arraste qualquer alça do ponto de controle e observe a curva, a visualização da animação ao vivo e a string CSS copiável, todas atualizadas juntas - não há necessidade de memorizar a matemática das coordenadas.
✓ Y pode ultrapassar 0 e 1 para efeitos de mola e salto, enquanto X permanece preso ao intervalo de 0 a 1 que o CSS realmente exige, portanto, cada valor que você copia é válido no momento em que você o cola.
✓ A visualização lado a lado compara sua curva personalizada contra uma referência linear simples, de modo que a diferença na sensação de movimento - todo o motivo para usar a suavização - é óbvia à primeira vista, não apenas uma saída de código.

Casos de uso

  • • Você precisa de um valor personalizado de função de tempo de transição CSS ou função de tempo de animação em vez de uma das palavras-chave de facilidade integradas?
  • • Você quer ver exatamente como cúbico-bezier(0.42, 0, 0.58, 1) — os números reais por trás da palavra-chave easy-in-out do próprio CSS — se parece em movimento antes de enviá-lo?
  • • Você está construindo um botão saltitante, modal ou animação de cartão e precisa de uma curva de atenuação de overshoot pronta para copiar diretamente em sua folha de estilo?