Kuinka luoda uudelleenkäytettävä haalistuva animaatiokomponentti reagoimaan GSAP: n kanssa

Jos et ole kuullut tai käyttänyt GSAP: ta, menetät. GSAP on animaatiokirjasto komponenteille ja elementeille. Heidän kotisivunsa näyttää paljon mahtavia animaatioita, joita voit tehdä työkalulla.

GSAP: lla on paljon kokoonpanoja, eikä ole olemassa yhtä oikeaa tapaa saavuttaa yhden tyyppinen animaatio. Joten etsimme yhtä tapaa (mielipidettä) luoda "Fade In" -animaatio komponentin latautuessa.

Tässä artikkelissa ei käsitellä yksityiskohtaisesti GSAP: n käyttöä. Heidän dokumentaationsa on käytettävä resurssi, jos haluat perusteellisen oppaan työkalun oppimiseksi.

Mitä aiomme animoida

Tässä on pieni kuvaus siitä, mitä animoimme:

Se on jotain yksinkertaista. Kun komponentti ladataan (minne tahansa), se haalistuu. Lisäämme myös suunnan niin, että komponentti haalistuu alueelta normaaliasentoon.

Teemme myös animaatiokomponentin uudelleenkäytettäväksi, jotta voimme soveltaa sitä eri elementteihin.

Aloitetaan!

GSAP-asennus

Ensinnäkin, sinulla on oltava reagointiprojekti perustettu. create-reagoi-sovellus on sinua varten, jos sinun on määritettävä sellainen nopeasti tälle projektille.

Asenna GSAP kirjoittamalla terminaaliin seuraava komento (nykyinen hakemisto on reaktioprojektihakemisto):

npm install --save gsap 

Luo käyttökelpoinen animaatiokomponentti

Komponentin asettaminen

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

Animaatiomme ei ole vielä valmis, mutta ymmärretään mistä aloitamme.

  • wrapperElement: käytetään määrittämään mikä komponentti olisi. Sen oletusarvo on div. Tämä on parempi kuin luoda ylimääräinen DOM-solmu animoidun komponentin käärimiseksi.
  • useRef: gsapTarvitsemme tätä, jotta tiedämme, mihin animaatiot käynnistetään. Tämän avulla voimme viitata komponenttiin DOM: ssa.
  • useEffect: ilman tätä gsapkäynnistää animaatiot, joissa on nolla viite ( useRef(null)). Meidän on varmistettava, että komponentti on jo asennettu, joten tämä koukku.
  • children: tämä on mitä löytyy välillä ja . Voi olla teksti tai jopa joukko elementtejä.
  • ...props: uudelleenkäytettävyyden laajentamiseksi tämä on välttämätöntä, jotta komponentit voivat käyttää muita potkureita, kuten classNameja style.
  • direction: tapauksissa, joissa haluamme lisätä suuntausta haalistumisvaikutukseen. Oletusarvo on nolla.

Siirrytään nyt GSAP: lle.

Animaation asettaminen

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; 

Käydään läpi mitä täällä tapahtui:

  • Alustimme muuttujan distancearvoksi 200. Tämä on hyödyllinen tapauksissa, joissa käytetään suuntaa. Voit myös lisätä tämän tulotukiin, jotta sitä käyttävä komponentti voi päättää.
  • Meillä on switchtapaus. Tämän tarkoituksena on määrittää häivytyssuunta, oletusarvoisesti tapauksissa, joissa suuntaa ei ole määritetty.
  • Sitten gsap. Tämä altistetaan GSAP: lle komponenttimme animoimiseksi. On .to, .from, .fromToja löydät docs.
  • gsap.frommeidän tapauksessamme viittaa komponentin alkutilaan ennen viimeistä (asetettu komponentin tyylitaulukossa). Kohdistamme nykyisen viitteen elementin, käytämme 1 sekunnin kestoa ja otamme animaatiovaihtoehtoja.
  • ...fadeDirection: levitämme objektin niin, että se näkyy siellä {x: 200}määritetyllä tavalla. xon vaaka- ja ypystysuuntainen.
  • Sitten alkuperäinen opasiteetti 0 ja viive komponentin määrittelemällä tavalla.

Ja siinä se. Tehdään komponentti, joka käyttää tätä mahtavaa animaatiota.

Kuinka käyttää uudelleenkäytettävää haalistumista komponentissa

Siirry komponenttiin, jonka haluat animoida, ja tee jotain samanlaista kuin seuraava:

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

Hello

); }

Kuten yllä nähtiin, FadeInAnimationkomponenttimme voi hyväksyä stylepotkurin. Muista, että teimme ...props.

Tässä on tulos CodeSandBoxissa

Paketoida

Se on kääre. Tämä on yksinkertainen (mielipiteellinen) GSAP-käyttö haalistuviin vaikutuksiin.

Tietysti voit määrittää sen edelleen, kuten tehdä haalistuva pomppuefekti, häipyvä kiertää ja muita hauskoja asioita. Mutta toivon, että tämä artikkeli on antanut sinulle lyhyen ja ytimekkään johdannon kuinka mahtava GSAP on ja kuinka aloittaa hämmästyttävien asioiden tekeminen verkossa.

Sivuhuomautus: tämä on samanlainen kuin asennus, jota käytän uudessa animaatiopaketissa, jonka käynnistän pian. Jaan sen tässä artikkelissa, kun se julkaistaan:)