Fungsi Easing Kustom
Tulis atau impor fungsi easing untuk mengatur kecepatan animasi.
Fungsi Easing Kustom adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Apa Itu Fungsi Pelandaian
Fungsi pelandaian memetakan waktu linier (0 hingga 1) ke kurva kemajuan nonlinier sehingga animasi memiliki karakter.
Tanda Tangan Fungsi
Fungsi pelandaian menerima t dalam rentang [0, 1] dan mengembalikan kemajuan yang disesuaikan.
function linear(t) { return t; }Pustaka Bawaan
svelte/easing milik Svelte mengekspor kurva umum: linier, quadIn, cubicOut, elasticOut, bounceOut, dan seterusnya.
Menggunakan Fungsi Bawaan
Teruskan ke transisi atau interpolasi bertahap.
import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });Fungsi Kustom
Tulis fungsi Anda sendiri agar sesuai dengan desain.
function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }Kurva Bezier
Konversikan nilai cubic-bezier CSS menjadi fungsi JS untuk kendali yang presisi.
Kapan Digunakan
Sesuaikan pelandaian dengan tindakannya: kubik-keluar untuk kemunculan, kubik-masuk untuk keluar, dan elastis-keluar untuk kemunculan yang memantul.
Komposisi
Gabungkan beberapa fungsi pelandaian untuk gerakan kompleks, misalnya awal cepat, akhir lambat, dan pantulan saat selesai.
Visualisasi Pelandaian
Gunakan alat daring seperti easings.net untuk melihat pratinjau kurva sebelum menulis kode.
Aksesibilitas
Hindari fungsi pelandaian yang terlalu banyak memantul bagi pengguna yang sensitif terhadap gerakan.
Dapat Digunakan Kembali
Tentukan fungsi pelandaian kustom dalam modul bersama agar nuansanya konsisten di seluruh aplikasi.
Pemeriksaan Singkat
Apa rentang masukan fungsi pelandaian?
Rangkuman
Pelandaian memetakan kemajuan linier ke sebuah kurva. Gunakan fungsi bawaan dari svelte/easing atau tulis fungsi kustom.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Fungsi Easing Kustom” gratis?
Ya — teks lengkap “Fungsi Easing Kustom” 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 “Fungsi Easing Kustom”?
Tulis atau impor fungsi easing untuk mengatur kecepatan animasi. 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 3 dari 4.
Berapa lama pelajaran “Fungsi Easing Kustom” 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