Os Stores spring() e tweened()
Anime valores numéricos com stores spring baseados em física ou stores tweened baseados em duração.
Os Stores spring() e tweened() é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 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.
Armazenamentos de movimento
Svelte fornece armazenamentos sensíveis a movimento: tweened (baseado em duração) e spring (baseado em física).
Importação
De svelte/motion.
import { tweened, spring } from "svelte/motion";Criação de tweened
Passe um valor inicial e opções como duration e easing.
const progress = tweened(0, { duration: 500 });Definição ou atualização
Chame set() ou update(); o armazenamento anima automaticamente a transição entre os valores.
progress.set(1);Criação de spring
Os armazenamentos spring têm opções de stiffness e damping para controlar o comportamento físico.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Inscrição com $
Utilize-os como qualquer armazenamento nos componentes.
<p>{$progress}</p>Números e objetos
Ambos os armazenamentos interpolam números e estruturas com propriedades numéricas aninhadas.
Interpolação personalizada
Passe uma função interpolate personalizada para valores não numéricos, como cores.
Spring imediato
Chame spring.set(value, { hard: true }) para mudar de valor sem animação.
Casos de uso
Rastreamento do mouse, arrastar, interfaces acionadas pela rolagem, medidores e barras de progresso.
Combinação com transformações
Aplique o valor animado a style="transform: ..." para obter um movimento suave.
Verificação rápida
Qual armazenamento proporciona um movimento semelhante ao da física?
Recapitulação
tweened e spring, de svelte/motion, animam valores numéricos suavemente.
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 “Os Stores spring() e tweened()” é grátis?
Sim — o texto completo de “Os Stores spring() e tweened()” é 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 “Os Stores spring() e tweened()”?
Anime valores numéricos com stores spring baseados em física ou stores tweened baseados em duração. 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 2 de 4.
Quanto tempo leva a aula “Os Stores spring() e tweened()”?
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