React Academy · Lekcja

Komponenty Motion i podstawowe animacje

Zastępowanie div przez motion.div oraz używanie propsów animate, initial i exit do tworzenia prostych animacji.

Komponenty Motion i podstawowe animacje to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest Framer Motion?

Framer Motion to biblioteka animacji dla Reacta. Elementy HTML należy zastępować ich odpowiednikami motion.*, aby dodawać deklaratywne animacje za pomocą propsów zamiast klatek kluczowych CSS.

Instalacja

Należy zainstalować Framer Motion i zaimportować z niego motion.

npm install framer-motion

import { motion } from 'framer-motion';

Pierwsza animacja

Należy zastąpić <div> elementem <motion.div> i dodać propsy initial, animate oraz transition.

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

Właściwość initial

initial definiuje początkowy stan animacji — miejsce, w którym element znajduje się przed rozpoczęciem animacji do stanu animate.

// 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 }}
/>

Właściwość animate

animate definiuje stan docelowy. Framer Motion interpoluje wartości między initial i animate, korzystając z fizyki sprężyny lub określonego easing.

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

Opcje przejścia

Prop transition określa sposób przebiegu animacji: duration, ease, delay, type ('spring' | 'tween' | 'inertia').

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

Klatki kluczowe w animate

Przekazanie tablicy do dowolnej animowanej wartości pozwala utworzyć animację opartą na klatkach kluczowych, która przechodzi przez wiele stanów.

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

Stany najechania kursorem i naciśnięcia

whileHover i whileTap definiują animowane stany dla interakcji polegających na najechaniu kursorem i naciśnięciu, automatycznie powracając do poprzedniego stanu po zakończeniu gestu.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

Animacja podczas przewijania za pomocą inView

Prop whileInView służy do uruchamiania animacji, gdy element zostanie przewinięty do obszaru widocznego w oknie.

<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>

Właściwość exit z AnimatePresence

exit definiuje animację wykonywaną podczas odmontowywania komponentu. Działa wyłącznie wtedy, gdy komponent jest opakowany w <AnimatePresence>.

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>

useAnimate do sterowania imperatywnego

useAnimate() zwraca referencję scope oraz funkcję animate, które umożliwiają programowe sterowanie animacją poza deklaratywnym systemem propsów.

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>;
}

Ograniczanie ruchu

Należy respektować preferencje użytkownika dotyczące ograniczenia ruchu, korzystając z hooka useReducedMotion().

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

Szybkie sprawdzenie

Który prop Framer Motion definiuje stan animacji, do którego komponent powinien dojść (stan docelowy)?

Podsumowanie

Elementy HTML należy zastępować odpowiednikami motion.*. initial służy do określania stanu początkowego, animate — docelowego, a transition — parametrów czasowych. whileHover/whileTap służą do obsługi gestów, a whileInView do animacji uruchamianych podczas przewijania.

Często zadawane pytania

Czy lekcja „Komponenty Motion i podstawowe animacje” jest bezpłatna?

Tak — pełny tekst „Komponenty Motion i podstawowe animacje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Komponenty Motion i podstawowe animacje”?

Zastępowanie div przez motion.div oraz używanie propsów animate, initial i exit do tworzenia prostych animacji. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Komponenty Motion i podstawowe animacje”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy