Funções de easing personalizadas
Escreva ou importe funções de easing para controlar o ritmo das animações.
Funções de easing personalizadas é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
O que é suavização
Uma função de suavização mapeia o tempo linear (de 0 a 1) para uma curva de progresso não linear, dando personalidade às animações.
Assinatura da função
Uma função de suavização recebe t no intervalo [0, 1] e retorna o progresso ajustado.
function linear(t) { return t; }Biblioteca integrada
O svelte/easing do Svelte exporta curvas comuns: linear, quadIn, cubicOut, elasticOut, bounceOut etc.
Uso das funções integradas
Passe-a para uma transição ou animação gradual.
import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });Funções personalizadas
Escreva a sua própria função para corresponder a um design.
function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }Curvas de Bézier
Converta valores CSS de cubic-bezier em funções JS para obter controle preciso.
Quando usar
Combine a suavização com a ação: uma curva cúbica de saída para entradas, uma curva cúbica de entrada para saídas e uma curva elástica de saída para revelações com efeito de quique.
Composição
Combine várias suavizações para criar movimentos complexos, como um início rápido, um final lento e um quique no fim.
Visualizador de suavização
Utilize ferramentas online como easings.net para visualizar as curvas antes de programar.
Acessibilidade
Evite suavizações excessivamente elásticas para usuários sensíveis a movimento.
Reutilização
Defina suavizações personalizadas em um módulo compartilhado para manter uma sensação consistente em todo o aplicativo.
Verificação rápida
Qual é o intervalo de entrada da função de suavização?
Recapitulação
A suavização mapeia o progresso linear para uma curva. Utilize as funções integradas de svelte/easing ou escreva funções personalizadas.
Perguntas Frequentes
A aula “Funções de easing personalizadas” é grátis?
Sim — o texto completo de “Funções de easing personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Funções de easing personalizadas”?
Escreva ou importe funções de easing para controlar o ritmo das animações. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Funções de easing personalizadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- animate:flip para reordenar listas
- Os Stores spring() e tweened()
- Funções de easing personalizadas
- Combinando transições e animações