Tambahkan kehidupan ke aplikasi Svelte Anda dengan mengintegrasikan transisi dan animasi menawan.
Jika dilakukan dengan baik, animasi dapat meningkatkan pengalaman pengguna dan dapat menjadi cara yang bagus untuk mengirimkan umpan balik kepada pengguna. Svelte memudahkan Anda menggabungkan animasi dan transisi ke dalam aplikasi Anda tanpa memerlukan pustaka JavaScript pihak ketiga.
Menyiapkan Proyek Langsing
Untuk memulai dan menjalankan Svelte, Anda harus memastikannya waktu proses Node.js Dan Manajer Paket Node (NPM) terinstal dengan benar di komputer Anda. Buka terminal Anda dan jalankan perintah berikut:
npm create vite
Ini akan berperan a proyek Vite.js baru. Beri nama proyek Anda, pilih Langsing sebagai kerangka kerja, dan atur variannya ke JavaScript. Kemudian beralih ke direktori proyek dan jalankan perintah berikut untuk menginstal dependensi yang diperlukan:
npm install
Hapus kode boilerplate dengan menghapus aktiva Dan lib folder, dan membersihkan isi Aplikasi.svelte Dan Aplikasi.css file.
Cara Menggunakan Tweening di Svelte
Tweening adalah teknik dalam animasi dan grafik komputer yang menghasilkan bingkai perantara antar bingkai utama untuk menciptakan gerakan atau transisi yang halus dan realistis. Svelte menawarkan a berusia dua belas tahun utilitas yang memungkinkan Anda menganimasikan elemen menggunakan nilai numerik, membuatnya mudah untuk membuat transisi dan animasi yang lancar di aplikasi web Anda.
Utilitas tweened adalah bagian dari langsing/gerak modul. Untuk menggunakan tweened di komponen Anda, Anda harus mengimpornya seperti ini:
import { tweened } from'svelte/motion'
Di bawah tenda, utilitas tweened hanyalah toko Svelte yang dapat ditulis. Toko Svelte pada dasarnya adalah objek JavaScript yang dapat Anda gunakan untuk menangani pengelolaan status. Toko tweened memiliki dua metode yaitu: mengatur Dan memperbarui. Pada tingkat dasar, sintaks untuk toko tweened terlihat seperti ini:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Blok kode di atas mendefinisikan sebuah variabel kamu dan mengikatnya ke toko tweened. Di toko, ada dua parameter. Parameter pertama mewakili nilai default tersebut kamu mengikat seharusnya. Parameter selanjutnya adalah objek dengan dua kunci durasi Dan pelonggaran. Itu durasi mendefinisikan berapa lama tween harus bertahan dalam milidetik sementara pelonggaran mendefinisikan fungsi pelonggaran.
Fungsi pelonggaran di Svelte mendefinisikan perilaku seorang tween. Fungsi-fungsi ini adalah bagian dari ramping/pelonggaran module yang berarti Anda harus mengimpor fungsi tertentu dari modul sebelum Anda dapat meneruskannya ke toko tweened. Svelte memiliki visualisator easing yang dapat Anda gunakan untuk mengeksplorasi perilaku berbagai fungsi easing.
Untuk mengilustrasikan sepenuhnya bagaimana Anda dapat menggunakan utilitas tweened, berikut adalah contoh penggunaan tweened store untuk meningkatkan ukuran elemen di Svelte.
