Hogyan hozhatunk létre újrafelhasználható, elhalványuló animációs komponenst a GSAP-val reagálva

Ha még nem hallott a GSAP-ról vagy nem használta, akkor kimarad. A GSAP egy animációs könyvtár az összetevők és elemek számára. Honlapjukon rengeteg fantasztikus animáció látható, amelyeket az eszközzel készíthet.

A GSAP sok konfigurációval rendelkezik, és egyetlen típusú animáció megvalósítására nincs egyetlen helyes módszer. Tehát megvizsgáljuk a „Fade In” animáció létrehozásának egyik módját (véleményes), amikor egy alkatrész betöltődik.

Ez a cikk nem részletezi a GSAP használatát. Dokumentációjuk a go-to erőforrás, ha részletes útmutatót szeretne az eszköz elsajátításához.

Amit animálni fogunk

Itt van egy kis leírás arról, hogy mit fogunk animálni:

Ez valami egyszerű. Ha egy alkatrészt betöltenek (bárhová is), az elhalványul. Hozzáadunk egy irányt is, hogy az alkatrész a területről a normál helyzetbe elhalványuljon.

Az animációs komponenst újrafelhasználhatóvá is tesszük, hogy alkalmazhassuk különböző elemekre.

Kezdjük el!

GSAP telepítés

Először is létre kell hoznia egy reagálási projektet. a create-reagál-app áll rendelkezésére, ha gyorsan be kell állítania egyet ehhez a projekthez.

A GSAP telepítéséhez írja be a következő parancsot a terminálba (az aktuális könyvtár a reakcióprojekt könyvtár):

npm install --save gsap 

Hozzon létre egy használható animációs komponenst

Az alkatrész beállítása

Hívjuk komponensünket FadeIn:

import React, {useRef, useEffect} from 'react' const FadeInAnimation = ({children, wrapperElement = 'div', direction = null, ...props}) => { const Component = wrapperElement; const compRef = useRef(null) useEffect(() => { // animations }, [compRef]) return (  {children}  ) } export default FadeInAnimation 

Animációnk még nem készült el, de értsük meg, mit kezdünk.

  • wrapperElement: megadja, hogy mi lenne az összetevő. Ez egy alapértelmezett div. Ez jobb, mint egy extra DOM csomópont létrehozása az animálni kívánt összetevő beburkolásához.
  • useRef: gsapErre szükségünk van ahhoz, hogy tudjuk, mi váltja ki az animációkat. Ezzel hivatkozhatunk a DOM komponensére.
  • useEffect: e nélkül gsapanimációkat indít el null hivatkozással ( useRef(null)). Gondoskodnunk kell arról, hogy az alkatrész már fel legyen szerelve, ezért ez a horog.
  • children: ez lesz az, ami megtalálható a és között . Lehet szöveg vagy akár elemcsoport.
  • ...props: az újrafelhasználhatóság kiterjesztése érdekében erre szükség van, hogy az alkatrészek más, például classNameés style.
  • direction: olyan esetekre, amikor irányt akarunk adni a kifakulás effektusnak. Az alapértelmezett érték null.

Most térjünk át a GSAP-ra.

Az animáció beállítása

import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; const FadeInAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 200; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay }); }, [compRef, fadeDirection, delay]); return (  {children}  ); }; export default FadeInAnimation; 

Nézzük át, mi történt itt:

  • Inicializáltunk egy változót distance200-ra. Ez hasznos olyan esetekben, amikor irányt alkalmazunk. Ezt hozzáadhatja a bemeneti kellékekhez is, hogy az azt használó komponens dönthessen.
  • Megvan a mi switchesetünk. Ez a bemerülés irányának meghatározása, alapértelmezett esettel azokban az esetekben, amikor az irány nincs megadva.
  • Akkor gsap. Ez a GSAP-ról van kitéve az alkatrészünk animálása érdekében. Van .to, .from, .fromToés még megtalálja a docs.
  • gsap.fromesetünkben a komponens kezdeti állapotára utal a végső előtt (a komponens stíluslapján állítva). Célozzuk a ref aktuális elemét, alkalmazzunk 1 másodperces időtartamot és alkalmazzuk az animációs lehetőségeket.
  • ...fadeDirection: terjesztjük az objektumot, így ott jelenik meg {x: 200}a megadott vagy a megadott módon. xvízszintes és yfüggőleges.
  • Ezután a kezdeti opacitás 0 és a komponens által meghatározott késleltetés.

És ez az. Készítsünk egy komponenst, amely ezt a fantasztikus animációt használja.

Hogyan kell használni a reszablálható fakulásunkat az alkatrészekben

Lépjen az animálni kívánt összetevőhöz, és tegyen valami hasonlót a következőkhöz:

import React from "react"; import FadeInAnimation from "./FadeInAnimation"; export default function App() { return ( Hello CodeSandbox   Start editing to see some magic happen!   

Hello

); }

Amint fent látható, FadeInAnimationkomponensünk elfogadhat egy styletámaszt. Ne feledje, hogy megtettük ...props.

Itt van az eredmény a CodeSandBox-ban

Tekerje be

Ez egy pakolás. Ez a GSAP egyszerű (véleményes) használata elhalványuló hatásokhoz.

Természetesen tovább konfigurálhatja, például egy elhalványuló visszapattanó effektust, az elhalványult forgatást és más szórakoztató dolgokat. De remélem, hogy ez a cikk röviden és tömören bemutatta, milyen fantasztikus a GSAP, és hogyan kezdheti el elképesztő dolgokat az interneten.

Mellékjegyzet: ez hasonló ahhoz a beállításhoz, amelyet egy új animációs csomagban használok, amelyet hamarosan elindítok. Megosztom ebben a cikkben, amikor megjelenik:)