Πώς να δημιουργήσετε ένα επαναχρησιμοποιήσιμο στοιχείο κινούμενου Fade-in στο React With GSAP

Εάν δεν έχετε ακούσει ή χρησιμοποιήσει το GSAP, χάνετε. Το GSAP είναι μια βιβλιοθήκη κινούμενων σχεδίων για στοιχεία και στοιχεία. Η αρχική σελίδα τους δείχνει πολλές εκπληκτικές κινούμενες εικόνες που μπορείτε να κάνετε με το εργαλείο.

Το GSAP έχει πολλές διαμορφώσεις και δεν υπάρχει κανένας σωστός τρόπος για να επιτευχθεί ένας τύπος κινούμενης εικόνας. Επομένως, θα εξετάσουμε έναν τρόπο (με γνώμονα) τη δημιουργία ενός animation "Fade In" όταν φορτώνεται ένα στοιχείο.

Αυτό το άρθρο δεν θα περιλαμβάνει λεπτομέρειες σχετικά με τον τρόπο χρήσης του GSAP. Η τεκμηρίωσή τους είναι ο πηγαίος πόρος αν θέλετε έναν σε βάθος οδηγό για να μάθετε το εργαλείο.

Τι θα κινούμαστε

Ακολουθεί μια μικρή περιγραφή για το τι θα κινούμαστε:

Είναι κάτι απλό. Όταν ένα στοιχείο φορτώνεται (οπουδήποτε), ξεθωριάζει. Θα προσθέσουμε επίσης κατεύθυνση έτσι ώστε το στοιχείο να ξεθωριάσει από την περιοχή στην κανονική θέση.

Θα κάνουμε επίσης το στοιχείο κινούμενης εικόνας να επαναχρησιμοποιείται, ώστε να μπορούμε να το εφαρμόσουμε σε διαφορετικά στοιχεία.

Ας αρχίσουμε!

Εγκατάσταση GSAP

Πρώτα, πρέπει να έχετε ρυθμίσει ένα έργο αντιδράσεων. Το create-react-app είναι διαθέσιμο για εσάς εάν χρειαστεί να δημιουργήσετε ένα για αυτό το έργο

Για να εγκαταστήσετε το GSAP, εισαγάγετε την ακόλουθη εντολή στο τερματικό σας (με τον τρέχοντα κατάλογο να είναι ο κατάλογος του έργου αντίδρασης):

npm install --save gsap 

Δημιουργήστε ένα χρησιμοποιήσιμο στοιχείο κινούμενης εικόνας

Ρύθμιση του στοιχείου

Ας καλέσουμε το στοιχείο μας 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 

Το κινούμενο σχέδιο μας δεν είναι ακόμη έτοιμο, αλλά ας καταλάβουμε τι ξεκινάμε.

  • wrapperElement: χρησιμοποιείται για να καθορίσει ποια θα ήταν η συνιστώσα. Έχει προεπιλογή div. Αυτό είναι καλύτερο από τη δημιουργία ενός επιπλέον κόμβου DOM για την αναδίπλωση του στοιχείου που θέλουμε να κινούμε.
  • useRef: gsapτο χρειαζόμαστε για να μάθουμε τι να ενεργοποιήσουμε κινούμενα σχέδια. Με αυτό, μπορούμε να αναφερθούμε στη συνιστώσα μας στο DOM.
  • useEffect: χωρίς αυτό, gsapθα ενεργοποιήσει κινούμενες εικόνες με μηδενική αναφορά ( useRef(null)). Πρέπει να διασφαλίσουμε ότι το εξάρτημα είναι ήδη τοποθετημένο, εξ ου και αυτός ο γάντζος.
  • children: αυτό θα βρεθεί μεταξύ και . Θα μπορούσε να είναι κείμενο ή ακόμη και μια ομάδα στοιχείων.
  • ...props: για να επεκταθεί η επαναχρησιμοποίηση, αυτό είναι απαραίτητο ώστε τα εξαρτήματα να μπορούν να εφαρμόσουν άλλα στηρίγματα όπως classNameκαι style.
  • direction: για περιπτώσεις όπου θέλουμε να προσθέσουμε κατεύθυνση στο εφέ εξασθένισης. Η προεπιλεγμένη τιμή είναι μηδενική.

Τώρα ας κατευθυνθούμε στο GSAP.

Ρύθμιση της κινούμενης εικόνας

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; 

Ας δούμε τι συνέβη εδώ:

  • Αρχικοποιήσαμε μια μεταβλητή distanceνα είναι 200. Αυτό είναι χρήσιμο για περιπτώσεις όπου εφαρμόζεται κατεύθυνση. Μπορείτε επίσης να το προσθέσετε στα στηρίγματα εισόδου, ώστε να μπορεί να αποφασίσει το στοιχείο που το χρησιμοποιεί.
  • Έχουμε την switchυπόθεσή μας . Αυτό γίνεται για τον προσδιορισμό της κατεύθυνσης του fade-in, με την προεπιλεγμένη περίπτωση για περιπτώσεις όπου η κατεύθυνση δεν έχει καθοριστεί.
  • Τότε gsap. Αυτό εκτίθεται από το GSAP για να ζωντανεύσει το στοιχείο μας. Υπάρχει .to, .from, .fromToκαι μπορείτε να βρείτε στα έγγραφα.
  • gsap.fromστην περίπτωσή μας αναφέρεται στην αρχική κατάσταση του στοιχείου πριν από το τελικό (που ορίζεται στο φύλλο στυλ του στοιχείου). Στοχεύουμε το τρέχον στοιχείο του ref, εφαρμόζουμε διάρκεια 1 δευτερολέπτου και εφαρμόζουμε τις επιλογές κινούμενης εικόνας.
  • ...fadeDirection: διαδίδουμε το αντικείμενο έτσι ώστε να εμφανίζεται εκεί {x: 200}ή όπως ορίζεται. xείναι για οριζόντια και yγια κάθετη.
  • Στη συνέχεια, μια αρχική αδιαφάνεια 0 και μια καθυστέρηση όπως καθορίζεται από το στοιχείο.

Και αυτό είναι. Ας φτιάξουμε ένα στοιχείο που χρησιμοποιεί αυτό το φοβερό κινούμενο σχέδιο.

Πώς να χρησιμοποιήσετε το αναδιαρθρώσιμο fade στο συστατικό μας

Προχωρήστε στο στοιχείο που θέλετε να κινούσετε και κάντε κάτι παρόμοιο με το ακόλουθο:

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

Hello

); }

Όπως φαίνεται παραπάνω, το FadeInAnimationστοιχείο μας μπορεί να δεχτεί ένα styleστήριγμα. Θυμηθείτε ότι το κάναμε ...props.

Εδώ είναι το αποτέλεσμα στο CodeSandBox

Τύλιξε

Αυτό είναι ένα περιτύλιγμα. Αυτή είναι μια απλή (με γνώμονα) χρήση του GSAP για εφέ εξασθένισης.

Φυσικά, μπορείτε να το διαμορφώσετε περαιτέρω, όπως να κάνετε ένα εφέ αναπήδησης ξεθωριάσματος, περιστροφή εξασθένισης και άλλα διασκεδαστικά πράγματα. Αλλά ελπίζω ότι αυτό το άρθρο σάς έδωσε μια σύντομη και συνοπτική εισαγωγή στο πόσο φοβερό είναι το GSAP και πώς να ξεκινήσετε να κάνετε καταπληκτικά πράγματα στον Ιστό.

Πλευρική σημείωση: αυτό είναι παρόμοιο με τη ρύθμιση που χρησιμοποιώ σε ένα νέο πακέτο κινούμενων σχεδίων που θα ξεκινήσω σύντομα. Θα το μοιραστώ σε αυτό το άρθρο όταν δημοσιευτεί:)