Animação

Easing curve lab

Easing curve lab: Seis curvas de aceleração levam pontos de A a B contra um relógio constante, com rastros e valores ao vivo que mostram onde aceleram, desaceleram ou ultrapassam o destino; escolha uma curva para reproduzi-la.

How should it land?

t 0.00 · 1100 ms · expo-out

linear

ease-in-out

expo-out

back-out

bounce

elastic

Pick a curve to replay it. Drag along a track to scrub time.

Como usar Easing curve lab

Easing curve lab usa o formato de prévia “amplo” com o tema “claro/escuro”.

Personalizar a prévia

Estes controles são passados para a demo. Os valores e limites descrevem a prévia; consulte a implementação para conhecer todas as props.

Controle	Tipo	Valor inicial	Limites da prévia
`title`	`text`	`How should it land?`	Até 48 caracteres
`selected`	`select`	`expo-out`	Opções: linear, ease-in-out, expo-out, back-out, bounce, elastic
`duration`	`number`	`1100`	De 300 a 2400; passo 50
`accent`	`color`	`#1F45FF`	Os metadados não indicam outro limite.
`trails`	`boolean`	`true`	Os metadados não indicam outro limite.
`loop`	`boolean`	`true`	Os metadados não indicam outro limite.

Para quais frameworks Easing curve lab está disponível?

Easing curve lab está disponível para React, Vue, Svelte, Astro, HTML. A prévia usa React; as observações sobre o código se referem a index.tsx. Confira as interações na versão escolhida antes de depender delas.

Quais são as dependências de Easing curve lab?

Os metadados React não indicam dependências npm adicionais ao React.

Quais detalhes de acessibilidade aparecem em Easing curve lab?

O código React de Easing curve lab inclui: elementos nativos (button); atributos e manipuladores (aria-checked, aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); papéis explícitos (radio, radiogroup, slider). Estas são observações do código. Verifique os nomes acessíveis, a ordem do foco e o comportamento do teclado na página completa.

Como Easing curve lab trata a redução de movimento?

Easing curve lab consulta a preferência de movimento no código React por meio de matchMedia(prefers-reduced-motion). Confira a implementação completa, os estilos compartilhados e a versão escolhida com a redução de movimento ativada; estas observações não garantem que todas as animações parem.

Conecte seu agente

Componentes abertos relacionados

Imagem estática do componente Archetype morph shape do Fieldbook, da categoria Animação.

2917Archetype morph shapeAnimaçãoUma forma se transforma em botão, interruptor, controle deslizante, cartão e caixa de seleção, com leituras ao vivo de sua largura, altura, raio dos cantos e partes durante cada mudança.

Imagem estática do componente Easing preview tile do Fieldbook, da categoria Animação.

1772Easing preview tileAnimaçãoUm bloco que reproduz a mesma escala em qualquer curva de atenuação escolhida, com a curva desenhada ao lado e um marcador sincronizado.

Imagem estática do componente Spring easing toggle do Fieldbook, da categoria Animação.

1808Spring easing toggleAnimaçãoUm bloco que desliza entre duas paradas em uma curva de mola inserida em uma transição simples CSS, com a curva gerada plotada ao lado dela.

Imagem estática do componente Interruptible hover swell do Fieldbook, da categoria Animação.

1780Interruptible hover swellAnimaçãoUm bloco cujo aumento de flutuação em dois estágios sempre começa a partir de seu tamanho atual, portanto, ligar e desligar o ponteiro nunca o faz quebrar.

Imagem estática do componente Resonant sand plate do Fieldbook, da categoria Animação.

2916Resonant sand plateAnimaçãoAreia fina sobre uma placa de aço vibrando salta das áreas que tremem e se assenta ao longo das linhas paradas, redesenhando uma nova figura a cada mudança de tom.

Imagem estática do componente Burst particle emitter do Fieldbook, da categoria Animação.

1672Burst particle emitterAnimaçãoEnvolve qualquer elemento e dispara um leque escalonado de pequenas manchas a partir de uma borda escolhida, ao clicar, em um loop ou na primeira vez que ele rola para ser exibido.