O Store spring(): animação baseada em física
Anime valores com rigidez e amortecimento configuráveis para obter uma sensação natural.
O Store spring(): animação baseada em física é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 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.
Física de mola
A loja spring anima valores com rigidez e amortecimento, como uma mola real.
Importar
A partir de svelte/motion.
import { spring } from "svelte/motion";Criar uma mola
Passe um valor inicial e as opções.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });Atualizar o alvo
Defina um novo alvo; o valor será animado em direção a ele.
pos.set({ x: 100, y: 50 });Inscrever-se com $
Use o valor de forma reativa na marcação.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>Acompanhar o mouse
Atualize o alvo da mola com as coordenadas do mouse para acompanhar o ponteiro de forma natural.
Definição imediata
Passe { hard: true } para mudar imediatamente.
pos.set({x: 0, y: 0}, { hard: true });Rigidez
Maior rigidez = aproximação mais rápida do alvo.
Amortecimento
Maior amortecimento = menos oscilação. 1 significa nenhum ressalto.
Vetores e objetos
As molas interpolam valores numéricos dentro de matrizes e objetos aninhados.
Desempenho
As molas usam rAF internamente. Elas são suaves mesmo com muitas instâncias simultâneas.
Verificação rápida
O que a rigidez da mola controla?
Recapitulação
As lojas spring animam com base em física. Ajuste stiffness e damping para obter a sensação desejada.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “O Store spring(): animação baseada em física” é grátis?
Sim — o texto completo de “O Store spring(): animação baseada em física” é 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 “O Store spring(): animação baseada em física”?
Anime valores com rigidez e amortecimento configuráveis para obter uma sensação natural. 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 1 de 4.
Quanto tempo leva a aula “O Store spring(): animação baseada em física”?
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