Geçişleri ve büyüleyici animasyonları entegre ederek Svelte uygulamalarınıza hayat katın.

İyi uygulandığında animasyon kullanıcı deneyimini iyileştirebilir ve kullanıcıya geri bildirim göndermenin harika bir yolu olabilir. Svelte, üçüncü taraf JavaScript kitaplıklarına çok az ihtiyaç duyarak uygulamanıza animasyonlar ve geçişler eklemenizi kolaylaştırır.

Svelte Projesi Kurma

Svelte ile çalışmaya başlamak için şunlardan emin olmalısınız: Node.js çalışma zamanı Ve Düğüm Paketi Yöneticisi (NPM) bilgisayarınıza düzgün bir şekilde yüklendiğinden emin olun. Terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm create vite

Bu bir iskele oluşturacak yeni Vite.js projesi. Projenize ad verin, seçin ince çerçeve olarak seçin ve değişkeni şu şekilde ayarlayın: JavaScript. Daha sonra proje dizinine geçin ve gerekli bağımlılıkları kurmak için aşağıdaki komutu çalıştırın:

npm install

Ortak metin kodunu silerek kaldırın. varlıklar Ve kitap klasörlerin içeriğini temizleme Uygulama.svelte Ve Uygulama.css Dosyalar.

instagram viewer

Svelte'de Ara Doldurma Nasıl Kullanılır

Ara doldurma, yumuşak ve gerçekçi hareket veya geçişler oluşturmak için ana kareler arasında ara kareler oluşturan, animasyon ve bilgisayar grafiklerinde kullanılan bir tekniktir. Svelte şunları sunuyor: arası doldurulmuş Sayısal değerleri kullanarak öğelere animasyon uygulamanıza olanak tanıyan, web uygulamalarınızda akıcı geçişler ve animasyonlar oluşturmanızı kolaylaştıran yardımcı program.

Arası doldurulan yardımcı program, ince/hareket modülü. Bileşeninizde arası doldurulmayı kullanmak için onu şu şekilde içe aktarmanız gerekir:

import { tweened } from'svelte/motion'

Temel olarak, arası doldurulan yardımcı program yalnızca yazılabilir bir Svelte deposudur. Svelte mağazası temel olarak durum yönetimini yönetmek için kullanabileceğiniz bir JavaScript nesnesidir. Arası doldurulan depolamanın iki yöntemi vardır: ayarlamak Ve güncelleme. Temel düzeyde, arası doldurulan mağazanın sözdizimi şuna benzer:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

Yukarıdaki kod bloğu bir değişkeni tanımlar sen ve bunu arası doldurulmuş bir depoya bağlar. Mağazada iki parametre vardır. İlk parametre varsayılan değeri temsil eder sen bağlama sahip olmalıdır. Bir sonraki parametre iki tuşlu bir nesnedir süre Ve hafifletme. süre aranın milisaniye cinsinden ne kadar sürmesi gerektiğini tanımlarken hafifletme hareket hızı fonksiyonunu tanımlar.

Svelte'deki hareket hızı işlevleri bir aranın davranışını tanımlar. Bu işlevler, ince/hafifletme Bu, arası doldurulan depoya aktarmadan önce modülden belirli bir işlevi içe aktarmanız gerektiği anlamına gelir. Svelte, farklı hareket hızı işlevlerinin davranışını keşfetmek için kullanabileceğiniz bir hareket hızı görselleştiricisine sahiptir.

Arası doldurulan yardımcı programı nasıl kullanabileceğinizi tam olarak göstermek için burada, Svelte'deki bir öğenin boyutunu artırmak için arası doldurulan depoyu kullanmanın bir örneği verilmiştir.