Funções de interpolação
Personalize como stores tweened interpolam valores complexos, como cores e matrizes.
Funções de interpolação é 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.
Interpolação personalizada
tweened e spring podem animar valores não numéricos com uma função interpolate personalizada.
Assinatura da função
A função de interpolação recebe os valores inicial e final e retorna uma função que mapeia o progresso para o valor interpolado.
function lerp(a, b) { return (t) => a + (b - a) * t; }Passar para tweened
Forneça sua função nas opções.
const p = tweened(0, { interpolate: lerp });Interpolação de cores
Use bibliotecas como d3-interpolate para interpolar entre cores.
Interpolação de matrizes
Interpole cada elemento de matrizes numéricas, como as coordenadas de caminhos SVG.
Interpolação de objetos
O comportamento padrão interpola propriedades numéricas; forneça uma função personalizada para as não numéricas.
Caminhos SVG
Anime textos de caminhos SVG interpolando suas coordenadas.
Textos animados com tweened
Textos (exceto cores) geralmente precisam de uma função personalizada para serem interpolados de forma significativa.
Por que personalizar
A interpolação personalizada permite criar animações de formas de dados complexas.
Combinar com aceleração
A aceleração define o formato da curva; a interpolação mapeia o espaço de valores. Elas funcionam em conjunto.
Desempenho
Mantenha a interpolação barata; ela é executada em cada quadro de animação.
Verificação rápida
O que interpolate faz?
Recapitulação
Funções interpolate personalizadas ampliam as lojas de movimento para cores, caminhos e qualquer valor que tenha um significado de "entre".
Perguntas Frequentes
A aula “Funções de interpolação” é grátis?
Sim — o texto completo de “Funções de interpolação” é 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 interpolação”?
Personalize como stores tweened interpolam valores complexos, como cores e matrizes. 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 interpolação”?
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
- O Store spring(): animação baseada em física
- O Store tweened(): duração e easing
- Funções de interpolação
- Animando caminhos SVG com movimento