React Academy · Lekcja

Animacje gestów: hover, tap i drag

Używanie propsów whileHover, whileTap i drag do animowania komponentów w reakcji na gesty użytkownika.

Animacje gestów: hover, tap i drag to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 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.

Przegląd propsów gestów

Propsy gestów Framer Motion animują komponenty w reakcji na dane wejściowe użytkownika bez używania procedur obsługi zdarzeń JavaScript. Najważniejsze z nich to whileHover, whileTap, whileDrag i whileFocus.

whileHover

Definiuje animowany stan, gdy kursor znajduje się nad elementem. Po opuszczeniu elementu przez kursor stan jest automatycznie przywracany.

<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

Definiuje animowany stan, gdy element jest naciskany. Doskonale nadaje się do sygnalizowania naciśnięcia przycisku.

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click
</motion.button>

whileFocus

Uruchamia animację, gdy element otrzyma fokus z klawiatury — świetnie sprawdza się przy tworzeniu dostępnych wskaźników fokusu.

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

Włączanie przeciągania

Należy dodać prop drag, aby umożliwić przeciąganie elementu. Wartość true, 'x' lub 'y' ogranicza przeciąganie do odpowiedniej osi.

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

dragConstraints z referencją

Przeciąganie można ograniczyć do elementu kontenera za pomocą referencji zamiast wartości w pikselach — przeciągany element nie może wyjść poza kontener.

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 określa, jak daleko element może zostać przeciągnięty poza swoje ograniczenia (0 = brak elastyczności, 1 = pełna elastyczność).

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

dragSnapToOrigin

Ustawienie dragSnapToOrigin powoduje, że po zwolnieniu element sprężyście wraca do swojej pierwotnej pozycji.

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

Zdarzenia pan

Za pomocą onPanStart, onPan i onPanEnd można śledzić położenie kursora podczas gestów pan bez włączania pełnego trybu przeciągania.

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

Zdarzenia przeciągania

Należy nasłuchiwać zdarzeń cyklu życia przeciągania: onDragStart, onDrag i onDragEnd. Obiekt info zawiera prędkość i przesunięcie.

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

Wzorzec przesuwania kart

Należy zaimplementować przesuwanie w stylu Tindera, wykorzystując prędkość przeciągania do wykrywania kierunku przesunięcia po zwolnieniu elementu.

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');
        }
      }}
    />
  );
}

Szybkie sprawdzenie

Jaki prop Framer Motion sprawia, że przeciągany element po zwolnieniu wraca sprężyście do swojej pierwotnej pozycji?

Podsumowanie

Propsów whileHover, whileTap i whileFocus należy używać do animowania interaktywnych stanów. Prop drag służy do tworzenia elementów, które można przeciągać, dragConstraints — do ograniczania przeciągania, a prędkość z onDragEnd — do wykrywania przesunięć.

Często zadawane pytania

Czy lekcja „Animacje gestów: hover, tap i drag” jest bezpłatna?

Tak — pełny tekst „Animacje gestów: hover, tap i drag” 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 „Animacje gestów: hover, tap i drag”?

Używanie propsów whileHover, whileTap i drag do animowania komponentów w reakcji na gesty użytkownika. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Animacje gestów: hover, tap i drag”?

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