Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme
Kullanıcı hareketlerinde bileşenleri canlandırmak için whileHover, whileTap ve drag prop'larını kullanın.
Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Hareket Özelliklerine Genel Bakış
Framer Motion hareket özellikleri, JavaScript olay işleyicileri olmadan kullanıcı girdisine yanıt olarak bileşenlere animasyon uygular. Temel özellikler whileHover, whileTap, whileDrag ve whileFocus seçenekleridir.
whileHover
İmleç öğenin üzerindeyken animasyonlu durumu tanımlar. İmleç ayrıldığında otomatik olarak eski durumuna döner.
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Hover me
</motion.button>whileTap
Öğeye basılırken animasyonlu durumu tanımlar. Düğmeye basma geri bildirimi için idealdir.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Öğe klavye odağını aldığında animasyon uygular — erişilebilir odak göstergeleri için harikadır.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Sürüklemeyi Etkinleştirme
Bir öğeyi sürüklenebilir hâle getirmek için drag özelliğini ekleyin. Ekseni sınırlamak için bunu true, 'x' veya 'y' olarak ayarlayın.
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
style={{ cursor: 'grab' }}
>
Drag me
</motion.div>Ref ile dragConstraints
Sürüklemeyi piksel değerleri yerine bir ref kullanarak container öğesiyle sınırlayın — sürüklenebilir öğe container dışına çıkamaz.
const constraintsRef = useRef(null);
<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
<motion.div
drag
dragConstraints={constraintsRef}
style={{ width: 80, height: 80, background: '#4f46e5' }}
/>
</div>dragElastic
dragElastic, öğenin sınırlarının ötesine ne kadar sürüklenebileceğini denetler (0 = esneklik yok, 1 = tam esneklik).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
dragSnapToOrigin ayarlandığında, öğe bırakıldığında yay gibi geri dönerek özgün konumuna yerleşir.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Pan Olayları
Tam sürükleme kipini etkinleştirmeden, pan hareketleri sırasında imleç konumunu izlemek için onPanStart, onPan ve onPanEnd kullanın.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>Sürükleme Olayları
Sürükleme yaşam döngüsü olaylarını dinleyin: onDragStart, onDrag ve onDragEnd. info nesnesi hız ve kayma miktarını içerir.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Kart Kaydırma Kalıbı
Bırakma sırasında kaydırma yönünü algılamak için sürükleme hızını kullanarak Tinder tarzı bir kaydırma uygulayın.
function SwipeCard({ onSwipe }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.7}
onDragEnd={(_, info) => {
if (Math.abs(info.velocity.x) > 400) {
onSwipe(info.velocity.x > 0 ? 'right' : 'left');
}
}}
/>
);
}Kısa Kontrol
Bırakıldığında sürüklenen öğenin özgün konumuna geri dönmesini hangi Framer Motion özelliği sağlar?
Özet
Etkileşimli durum animasyonları için whileHover, whileTap ve whileFocus kullanın. Sürüklenebilir öğeler için drag ekleyin, öğeyi dragConstraints ile sınırlayın ve kaydırmaları algılamak için onDragEnd hızını kullanın.
Sıkça Sorulan Sorular
“Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme” dersi ücretsiz mi?
Evet — “Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme” dersinde ne öğreneceğim?
Kullanıcı hareketlerinde bileşenleri canlandırmak için whileHover, whileTap ve drag prop'larını kullanın. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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 3. dersidir.
“Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- Hareket Bileşenleri ve Temel Animasyonlar
- Düzenlenmiş Animasyonlar için Varyantlar
- Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme
- Düzen Animasyonları ve AnimatePresence