Store’y spring() i tweened()
Animuj wartości liczbowe za pomocą store’a spring opartego na fizyce lub store’a tweened opartego na czasie trwania.
Store’y spring() i tweened() to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Store'y obsługujące animacje
Svelte udostępnia store'y uwzględniające animacje: tweened (oparty na czasie trwania) i spring (oparty na fizyce).
Importowanie
Z svelte/motion.
import { tweened, spring } from "svelte/motion";Tworzenie tweened
Przekaż wartość początkową oraz opcje, takie jak duration i easing.
const progress = tweened(0, { duration: 500 });Ustawianie lub aktualizowanie
Wywołaj set() lub update(); store automatycznie animuje przejście między wartościami.
progress.set(1);Tworzenie spring
Store'y spring mają opcje stiffness i damping, które określają zachowanie fizyczne.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Subskrypcja za pomocą $
Używaj ich w komponentach tak samo jak dowolnego store'a.
<p>{$progress}</p>Liczby i obiekty
Oba store'y interpolują liczby oraz obiekty zawierające zagnieżdżone właściwości liczbowe.
Własna interpolacja
Przekaż własną funkcję interpolate dla wartości nieliczbowych, takich jak kolory.
Natychmiastowe ustawianie spring
Wywołaj spring.set(value, { hard: true }), aby przeskoczyć do wartości bez animacji.
Zastosowania
Śledzenie myszy, przeciąganie, interfejs sterowany przewijaniem, wskaźniki, paski postępu.
Łączenie z transformacjami
Zastosuj animowaną wartość do style="transform: ...", aby uzyskać płynny ruch.
Szybkie sprawdzenie
Który store zapewnia ruch przypominający zachowanie fizyczne?
Podsumowanie
tweened i spring z svelte/motion płynnie animują wartości liczbowe.
Często zadawane pytania
Czy lekcja „Store’y spring() i tweened()” jest bezpłatna?
Tak — pełny tekst „Store’y spring() i tweened()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Store’y spring() i tweened()”?
Animuj wartości liczbowe za pomocą store’a spring opartego na fizyce lub store’a tweened opartego na czasie trwania. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Store’y spring() i tweened()”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- animate:flip do zmiany kolejności listy
- Store’y spring() i tweened()
- Niestandardowe funkcje easing
- Łączenie przejść i animacji