React Academy · Lekcja

Warianty do orkiestracji animacji

Definiowanie nazwanych obiektów wariantów i przekazywanie ich przez drzewa komponentów nadrzędnych i podrzędnych.

Lekcja 2 z 413 kroki

Warianty do orkiestracji animacji to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 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 są warianty?

Warianty to nazwane stany animacji definiowane jako obiekty. Zamiast wartości wpisywanych bezpośrednio komponenty odwołują się do nazw wariantów, takich jak 'hidden' i 'visible'. Komponenty nadrzędne mogą automatycznie koordynować komponenty potomne.

Definiowanie wariantów

Należy utworzyć obiekt variants z nazwanymi stanami. Następnie należy przekazać go do propa variants komponentu motion.

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={cardVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.4 }}
/>

Sekwencyjne animowanie elementów potomnych

Należy użyć staggerChildren w przejściu komponentu nadrzędnego, aby animować elementy potomne jeden po drugim, z opóźnieniem między kolejnymi elementami.

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 },
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

Propagacja wariantów

Gdy stan wariantu komponentu nadrzędnego się zmieni, wszystkie elementy potomne, które mają tę samą nazwę wariantu, również zostaną automatycznie animowane — nie trzeba przekazywać animate do każdego elementu potomnego.

// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };

<motion.div variants={parent} initial="hidden" animate="visible">
  <motion.p variants={child}>First</motion.p>
  <motion.p variants={child}>Second</motion.p>
  <motion.p variants={child}>Third</motion.p>
</motion.div>

Przełączanie między stanami

Za pomocą zmiennej stanu można określić, który wariant jest aktywny. Framer Motion płynnie przechodzi między nazwanymi stanami.

const [isOpen, setIsOpen] = useState(false);

const panelVariants = {
  closed: { height: 0, opacity: 0 },
  open: { height: 'auto', opacity: 1 },
};

<motion.div
  variants={panelVariants}
  animate={isOpen ? 'open' : 'closed'}
  initial="closed"
  transition={{ duration: 0.3 }}
/>

Niestandardowe przejście dla wariantu

Aby dostosować parametry czasowe wyłącznie dla danego stanu, należy dodać klucz transition wewnątrz wariantu.

const menuVariants = {
  closed: {
    scaleY: 0,
    transition: { duration: 0.2, ease: 'easeIn' },
  },
  open: {
    scaleY: 1,
    transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
  },
};

Warianty wyjścia z AnimatePresence

Należy dodać klucz exit do obiektu wariantów i opakować komponent w AnimatePresence, aby animować go podczas odmontowywania.

const pageVariants = {
  initial: { opacity: 0, x: '100%' },
  enter: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: '-100%' },
};

<AnimatePresence mode="wait">
  <motion.div
    key={router.pathname}
    variants={pageVariants}
    initial="initial"
    animate="enter"
    exit="exit"
    transition={{ duration: 0.3 }}
  />
</AnimatePresence>

Nadpisywanie zagnieżdżonych wariantów

Elementy potomne mogą nadpisać odziedziczony stan wariantu za pomocą własnych propsów initial lub animate, jeśli trzeba wyłączyć je z koordynacji komponentu nadrzędnego.

useAnimation do imperatywnego sterowania wariantami

useAnimation() zwraca obiekt kontrolek animacji. Aby programowo uruchomić warianty, należy wywołać controls.start('variantName').

const controls = useAnimation();

async function sequence() {
  await controls.start('wiggle');
  await controls.start('bounce');
}

<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />

Opcje koordynacji

Oprócz staggerChildren można użyć when ('beforeChildren' | 'afterChildren'), aby ustalić kolejność animacji komponentu nadrzędnego i elementów potomnych.

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: 'beforeChildren', // parent fades in before stagger starts
      staggerChildren: 0.1,
    },
  },
};

Wielokrotnego użytku biblioteki wariantów

Należy definiować warianty we współdzielonym pliku i importować je tam, gdzie są potrzebne, aby zachować spójność konfiguracji animacji w całej aplikacji.

// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />

Szybkie sprawdzenie

Jaka opcja przejścia Framer Motion opóźnia animacje elementów potomnych, uruchamiając je kolejno?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Warianty to nazwane stany definiowane jako obiekty. Należy ustawić staggerChildren w przejściu komponentu nadrzędnego, aby automatycznie kaskadowo animować elementy potomne. useAnimation() służy do sterowania imperatywnego, a AnimatePresence wraz z wariantami wyjścia — do animacji podczas odmontowywania.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 88
Lekcje: 324

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Warianty do orkiestracji animacji” jest bezpłatna?

Tak — pełny tekst „Warianty do orkiestracji animacji” 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 „Warianty do orkiestracji animacji”?

Definiowanie nazwanych obiektów wariantów i przekazywanie ich przez drzewa komponentów nadrzędnych i podrzędnych. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Warianty do orkiestracji animacji”?

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