Πώς να δημιουργήσετε κινούμενα σχέδια εισόδου και εξόδου για ένα στοιχείο React χρησιμοποιώντας την κίνηση Framer

Η κίνηση ενός στοιχείου React καθώς εισέρχεται ή εξέρχεται από την οθόνη μπορεί να είναι μια πρόκληση. Αυτό συμβαίνει επειδή, όταν αποκρύπτετε ένα στοιχείο, το React το αφαιρεί από το DOM, γεγονός που το καθιστά μη διαθέσιμο για κινούμενη εικόνα. Όταν εμφανίσετε ξανά το στοιχείο, το React το προσθέτει ξανά στο DOM, κάτι που μπορεί να έχει ως αποτέλεσμα μια απότομη εμφάνιση χωρίς κίνηση.

Μπορείτε να λύσετε αυτό το πρόβλημα με μια βιβλιοθήκη κινούμενων σχεδίων όπως το Framer Motion.

Τι είναι το Framer Motion;

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

Ένα πλεονέκτημα του Framer Motion είναι ότι διευκολύνει τη δημιουργία ομαλών και ρευστών κινούμενων εικόνων χωρίς να χρειάζεται να γράψετε πολύ κώδικα JavaScript ή να υπολογίσετε υπολογισμούς για κάθε μετάβαση.

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

Για να δείξετε πώς να χρησιμοποιείτε το Framer Motion στο React, θα κάνετε κίνηση σε ένα στοιχείο που εισέρχεται και εξέρχεται από την οθόνη όταν κάνετε κλικ σε ένα κουμπί.

Δημιουργία ενός έργου React

Για να δημιουργήσετε ένα έργο React, θα χρειαστεί εγκαταστήστε το Node.js και το npm (Node Package Manager) στον υπολογιστή σας αν δεν έχεις.

Μόλις εγκαταστήσετε αυτές τις εξαρτήσεις, μπορείτε δημιουργήστε ένα νέο έργο React χρησιμοποιώντας το Vite εκτελώντας την εντολή yarn vite στο τερματικό σας.

νήματα vite

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

εκκίνηση νήματος

Εγκατάσταση του Framer Motion στο React

Εγκαταστήστε το Framer Motion εκτελώντας αυτήν την εντολή:

npm εγκατάσταση framer-motion

Αυτή η εντολή θα προσθέσει το Framer Motion ως εξάρτηση στο έργο σας.

Κινούμενη κίνηση ενός στοιχείου

Για να κάνετε κίνηση σε ένα στοιχείο καθώς εισέρχεται και εξέρχεται από την οθόνη στο React χρησιμοποιώντας το Framer Motion, πρέπει να το τυλίξετε στο στοιχείο κίνησης.

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

Για να το δείτε σε δράση, προσθέστε τον ακόλουθο κώδικα στο επάνω μέρος του App.jsx για να εισαγάγετε το στοιχείο κίνησης από το framer-motion.

εισαγωγή { κίνηση } από"καδράρισμα-κίνηση";

Στη συνέχεια, δημιουργήστε το στοιχείο που θέλετε να κάνετε κίνηση τυλίγοντάς το με το στοιχείο κίνησης. Αυτό το παράδειγμα χρησιμοποιεί ένα στοιχείο div, αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο στοιχείο θέλετε, όπως κουμπί, li και p μεταξύ άλλων.

εισαγωγή { motion, AnimatePresence } από"καδράρισμα-κίνηση"
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 <>

 αρχικό={{ Χ: -100, αδιαφάνεια: 0 }}
 έμψυχο={{ Χ: 0, αδιαφάνεια: 1 }}
 έξοδο={{ Χ: -100, αδιαφάνεια: 0 }}
 >
Στάλθηκε!</p>
 </motion.div>

 </>
 )
}

Το στοιχείο κίνησης σάς επιτρέπει να κάνετε κίνηση του στοιχείου div που περιέχει το κείμενο "Εστάλη!".

ο αρχικός, έμψυχος, και έξοδος Οι ιδιότητες του στοιχείου κίνησης ορίζουν τις κινούμενες εικόνες εισόδου και εξόδου του στοιχείου. Όταν το στοιχείο αποδοθεί αρχικά, θα ξεκινήσει με μια θέση x -100 (εκτός οθόνης προς τα αριστερά) και μια αδιαφάνεια 0 και θα γίνει αόρατο.

Η ιδιότητα animate καθορίζει τον τρόπο με τον οποίο το στοιχείο πρέπει να κινείται όταν εισέρχεται στην οθόνη, σε αυτήν την περίπτωση μετακινώντας από ένα x θέση -100 σε θέση x 0 (ολίσθηση από αριστερά) και σταδιακά εξασθενεί σε αδιαφάνεια 1 και γίνεται πλήρως ορατός.

Τέλος, η ιδιότητα exit καθορίζει τον τρόπο με τον οποίο το στοιχείο θα πρέπει να κινείται όταν το αφαιρείτε από την οθόνη. Σε αυτήν την περίπτωση, το στοιχείο θα γλιστρήσει από την οθόνη προς τα αριστερά με θέση x -100 και σταδιακά θα εξασθενίσει σε μια αδιαφάνεια 0.

Πρέπει επίσης να τυλίξετε το στοιχείο κίνησης με το στοιχείο AnimatePresence από το framer-motion για να κινήσετε τα στοιχεία όταν τα αφαιρείτε από το δέντρο React DOM.

Τώρα που έχετε ορίσει τις κινούμενες εικόνες εισόδου και εξόδου, μπορείτε να προσθέσετε ένα κουμπί για να ενεργοποιήσετε την κινούμενη εικόνα. Εδώ είναι το τροποποιημένο στοιχείο με το κουμπί:

εισαγωγή { AnimatePresence, κίνηση } από"καδράρισμα-κίνηση";
εισαγωγή { useState } από"αντιδρώ";
λειτουργίαApp() {
συνθ [isVisible, setIsVisible] = useState(αληθής);
συνθ toggleΟρατότητα = () => {
 setIsVisible(!isVisible);
 };
ΕΠΙΣΤΡΟΦΗ (
 <>

 {isVisible && ( <κίνηση.διβ
 αρχικό={{ Χ: -100, αδιαφάνεια: 0 }}
 έμψυχο={{ Χ: 0, αδιαφάνεια: 1 }}
 έξοδο={{ Χ: -100, αδιαφάνεια: 0 }}
 >
Στάλθηκε!</p>
 </motion.div>)}
 </AnimatePresence>

 Κοινοποιώ
 </button>
 </>
 )
}

Αυτός ο ενημερωμένος κώδικας προσθέτει μια μεταβλητή κατάστασης που ονομάζεται isVisible χρησιμοποιώντας το άγκιστρο useState. Αυτή η μεταβλητή παρακολουθεί εάν το στοιχείο πρέπει να είναι ορατό. Η συνάρτηση toggleVisibility εναλλάσσει την τιμή του isVisible μεταξύ true και false όταν κάνετε κλικ στο κουμπί.

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

Τέλος, προσθέστε ένα πρόγραμμα χειρισμού συμβάντων onClick στο κουμπί που καλεί τη συνάρτηση toggleVisibility, ενημερώνει την κατάσταση του isVisible και ενεργοποιεί την κίνηση εισόδου ή εξόδου του στοιχείου κίνησης.

Προσθήκη συνάρτησης διευκόλυνσης

Μια λειτουργία διευκόλυνσης ελέγχει τον ρυθμό αλλαγής της κινούμενης εικόνας με την πάροδο του χρόνου. Καθορίζει το χρονοδιάγραμμα μιας κινούμενης εικόνας προσδιορίζοντας πώς η κινούμενη εικόνα πρέπει να επιταχύνει ή να επιβραδύνει καθώς προχωρά. Χωρίς λειτουργία easing, η κινούμενη εικόνα μπορεί να αποδοθεί πολύ γρήγορα.

Το Framer Motion παρέχει πολλές λειτουργίες διευκόλυνσης για να διαλέξετε, συμπεριλαμβανομένου του easeInOut. Εισαγάγετε το στο επάνω μέρος του App.jsx από το framer-motion για να το χρησιμοποιήσετε.

εισαγωγή { motion, easeInOut } από"καδράρισμα-κίνηση";

Στη συνέχεια, προσθέστε το στο αντικείμενο μετάβασης στο στοιχείο κίνησης:

 αρχικό={{ Χ: -100, αδιαφάνεια: 0 }}
 έμψυχο={{ Χ: 0, αδιαφάνεια: 1, μετάβαση: { διάρκεια: 0.5, ευκολία: easeInOut } }}
 έξοδο={{ Χ: -100, αδιαφάνεια: 0, μετάβαση: { διάρκεια: 0.5, ευκολία: easeInOut } }}
>
Στάλθηκε!</p>
</motion.div>

Η ιδιότητα duration καθορίζει πόσο καιρό θα εκτελείται η κινούμενη εικόνα.

Χρησιμοποιήστε απλό CSS για απλά κινούμενα σχέδια

Υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε με το Framer Motion, συμπεριλαμβανομένης της τρισδιάστατης κίνησης. Ωστόσο, δεν χρειάζεστε πάντα μια βιβλιοθήκη για να δημιουργήσετε κινούμενα σχέδια. Για απλές κινούμενες εικόνες, όπως μεταβάσεις αιώρησης, μπορείτε πάντα να χρησιμοποιείτε απλό CSS.