spring() ve tweened() Store'ları
Sayısal değerleri fizik tabanlı spring veya süre tabanlı tweened store'larla canlandırın.
spring() ve tweened() Store'ları, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Hareket Depoları
Svelte, hareket farkındalığına sahip depolar sağlar: tweened (süre tabanlı) ve spring (fizik tabanlı).
İçe Aktarma
svelte/motion üzerinden.
import { tweened, spring } from "svelte/motion";Tweened Oluşturma
Bir başlangıç değeri ile duration ve easing gibi seçenekleri aktarın.
const progress = tweened(0, { duration: 500 });Ayarlama veya Güncelleme
set() ya da update() işlevini çağırın; depo, değerler arasındaki geçişi otomatik olarak canlandırır.
progress.set(1);Spring Oluşturma
Spring depolarında fizik davranışını belirleyen stiffness ve damping seçenekleri bulunur.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });$ ile Abone Olma
Bunları bileşenlerde diğer tüm depolar gibi kullanın.
<p>{$progress}</p>Sayılar ve Nesneler
Her iki depo da sayılarla ve iç içe sayısal özelliklere sahip nesnelerle ara değerleme yapar.
Özel Ara Değerleme
Renkler gibi sayısal olmayan değerler için özel bir interpolate işlevi aktarın.
Spring'i Sertleştirme
Animasyon olmadan doğrudan geçiş yapmak için spring.set(value, { hard: true }) çağrısını yapın.
Kullanım Alanları
Fare takibi, sürükleme, kaydırmayla yönlendirilen arayüzler, göstergeler ve ilerleme çubukları.
Dönüşümlerle Birlikte Kullanma
Akıcı hareket için canlandırılan değeri style="transform: ..." üzerinde uygulayın.
Hızlı Kontrol
Hangi depo fizik benzeri hareket sağlar?
Özet
svelte/motion içindeki tweened ve spring, sayısal değerleri akıcı biçimde canlandırır.
Sıkça Sorulan Sorular
“spring() ve tweened() Store'ları” dersi ücretsiz mi?
Evet — “spring() ve tweened() Store'ları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“spring() ve tweened() Store'ları” dersinde ne öğreneceğim?
Sayısal değerleri fizik tabanlı spring veya süre tabanlı tweened store'larla canlandırın. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“spring() ve tweened() Store'ları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Liste Sıralaması için animate:flip
- spring() ve tweened() Store'ları
- Özel Easing İşlevleri
- Geçişleri ve Animasyonları Birleştirme