Store spring(): Animasi Berbasis Fisika
Animasikan nilai dengan kekakuan dan redaman yang dapat dikonfigurasi agar terasa alami.
Store spring(): Animasi Berbasis Fisika adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Fisika Pegas
Penyimpanan spring menganimasikan nilai dengan kekakuan dan redaman, seperti pegas sungguhan.
Impor
Dari svelte/motion.
import { spring } from "svelte/motion";Buat Pegas
Berikan nilai awal dan opsi.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });Perbarui Target
Tetapkan target baru; nilainya akan dianimasikan menuju target tersebut.
pos.set({ x: 100, y: 50 });Berlangganan dengan $
Gunakan nilainya secara reaktif dalam markup.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>Mengikuti Tetikus
Perbarui target pegas dengan koordinat tetikus agar penunjuk dapat diikuti secara alami.
Tetapkan Langsung
Berikan { hard: true } untuk berpindah secara langsung.
pos.set({x: 0, y: 0}, { hard: true });Kekakuan
Kekakuan lebih tinggi = pergerakan menuju target lebih cepat.
Redaman
Redaman lebih tinggi = osilasi lebih sedikit. Nilai 1 berarti tidak ada pantulan.
Vektor dan Objek
Pegas melakukan interpolasi terhadap nilai numerik di dalam larik dan objek bertingkat.
Kinerja
Pegas menggunakan rAF secara internal. Animasi tetap mulus bahkan untuk banyak instans secara bersamaan.
Pemeriksaan Singkat
Apa yang dikendalikan oleh kekakuan pegas?
Rangkuman
Penyimpanan spring menganimasikan nilai menggunakan fisika. Sesuaikan stiffness dan damping untuk mendapatkan nuansa yang diinginkan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Store spring(): Animasi Berbasis Fisika” gratis?
Ya — teks lengkap “Store spring(): Animasi Berbasis Fisika” 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(): Animasi Berbasis Fisika”?
Animasikan nilai dengan kekakuan dan redaman yang dapat dikonfigurasi agar terasa alami. 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 1 dari 4.
Berapa lama pelajaran “Store spring(): Animasi Berbasis Fisika” 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
- Store spring(): Animasi Berbasis Fisika
- Store tweened(): Durasi dan Easing
- Fungsi Interpolasi
- Menganimasikan Jalur SVG dengan Gerakan