Hareket Bileşenleri ve Temel Animasyonlar
Basit animasyonlar için div'i motion.div ile değiştirin ve animate, initial ve exit prop'larını kullanın.
Hareket Bileşenleri ve Temel Animasyonlar, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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.
Framer Motion Nedir?
Framer Motion, React için bir animasyon kütüphanesidir. Bildirimsel animasyonlar eklemek için HTML öğelerini CSS anahtar kareleri yerine özellikler aracılığıyla motion.* eşdeğerleriyle değiştirin.
Kurulum
Framer Motion'ı kurun ve motion'ı içe aktarın.
npm install framer-motion
import { motion } from 'framer-motion';İlk Animasyonunuz
<div> öğesini <motion.div> ile değiştirin ve initial, animate ve transition özelliklerini ekleyin.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>initial Özelliği
initial, öğenin animate durumuna geçmeden önce başladığı yeri, yani animasyonun başlangıç durumunu tanımlar.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>animate Özelliği
animate, hedef durumu tanımlar. Framer Motion, yay fiziğini veya belirtilen bir yumuşatma işlevini kullanarak initial ile animate arasındaki değerleri ara değerler hâline getirir.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Geçiş Seçenekleri
transition özelliği animasyonun nasıl ilerleyeceğini denetler: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}animate İçinde Anahtar Kareler
Birden çok durumdan geçen anahtar kare animasyonları oluşturmak için herhangi bir animasyon değerine bir dizi aktarın.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Üzerine Gelme ve Dokunma Durumları
whileHover ve whileTap, üzerine gelme ve basma etkileşimleri için animasyonlu durumları tanımlar; hareket sona erdiğinde otomatik olarak eski durumlarına döner.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>inView ile Kaydırmada Animasyon
Öğe görüntü alanına kaydırılarak girdiğinde bir animasyonu tetiklemek için whileInView özelliğini kullanın.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>AnimatePresence ile exit Özelliği
exit, bir bileşen kaldırıldığında çalışacak animasyonu tanımlar. Yalnızca <AnimatePresence> ile sarıldığında çalışır.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>Buyruklu Denetim için useAnimate
useAnimate(), bildirimsel özellik sisteminin dışında programatik animasyon denetimi için bir scope ref'i ve bir animate işlevi döndürür.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Hareketi Azaltma
Kullanıcının azaltılmış hareket tercihi için useReducedMotion() kancasını kullanın.
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Kısa Kontrol
Bir bileşenin ulaşması gereken animasyon durumunu (hedefini) hangi Framer Motion özelliği tanımlar?
Özet
HTML öğelerini motion.* eşdeğerleriyle değiştirin. Başlangıç durumu için initial, hedef için animate, zamanlama için transition, hareketler için whileHover/whileTap ve kaydırmayla tetiklenen animasyonlar için whileInView kullanın.
Sıkça Sorulan Sorular
“Hareket Bileşenleri ve Temel Animasyonlar” dersi ücretsiz mi?
Evet — “Hareket Bileşenleri ve Temel Animasyonlar” 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 Bileşenleri ve Temel Animasyonlar” dersinde ne öğreneceğim?
Basit animasyonlar için div'i motion.div ile değiştirin ve animate, initial ve exit 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 1. dersidir.
“Hareket Bileşenleri ve Temel Animasyonlar” 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