Store spring() dan tweened()
Animasikan nilai numerik dengan store spring berbasis fisika atau store tweened berbasis durasi.
Store spring() dan tweened() adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Penyimpan Gerak
Svelte menyediakan penyimpan yang mendukung gerakan: tweened (berbasis durasi) dan spring (berbasis fisika).
Impor
Dari svelte/motion.
import { tweened, spring } from "svelte/motion";Membuat Interpolasi Bertahap
Teruskan nilai awal dan opsi seperti duration dan easing.
const progress = tweened(0, { duration: 500 });Tetapkan atau Perbarui
Panggil set() atau update(); penyimpan secara otomatis menganimasikan perpindahan antar nilai.
progress.set(1);Membuat Pegas
Penyimpan pegas memiliki opsi stiffness dan damping untuk perilaku berbasis fisika.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Berlangganan dengan $
Gunakan penyimpan tersebut seperti penyimpan lainnya dalam komponen.
<p>{$progress}</p>Angka dan Objek
Kedua penyimpan melakukan interpolasi pada angka dan struktur dengan properti angka bertingkat.
Interpolasi Kustom
Teruskan fungsi interpolate kustom untuk nilai nonnumerik seperti warna.
Pegas Instan
Panggil spring.set(value, { hard: true }) untuk langsung berpindah tanpa animasi.
Kasus Penggunaan
Pelacakan tetikus, seret, antarmuka pengguna yang digerakkan guliran, pengukur, bilah kemajuan.
Padukan dengan Transformasi
Terapkan nilai yang dianimasikan ke style="transform: ..." untuk gerakan yang mulus.
Pemeriksaan Singkat
Penyimpan mana yang menghasilkan gerakan seperti fisika?
Rangkuman
tweened dan spring dari svelte/motion menganimasikan nilai numerik secara mulus.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Store spring() dan tweened()” gratis?
Ya — teks lengkap “Store spring() dan tweened()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Store spring() dan tweened()”?
Animasikan nilai numerik dengan store spring berbasis fisika atau store tweened berbasis durasi. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Store spring() dan tweened()” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- animate:flip untuk Mengurutkan Ulang Daftar
- Store spring() dan tweened()
- Fungsi Easing Kustom
- Menggabungkan Transisi dan Animasi