Μάθετε πώς να προσθέτετε απλά κινούμενα σχέδια στην εφαρμογή React με ελάχιστη προσπάθεια κωδικοποίησης.

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

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

Πώς λειτουργεί το Framer Motion

Το Framer Motion χρησιμοποιεί το στοιχείο κίνησης για κινούμενα σχέδια. Κάθε στοιχείο HTML/SVG έχει ένα ισοδύναμο στοιχείο κίνησης που έχει στηρίγματα για χειρονομίες και κινούμενα σχέδια. Για παράδειγμα, ένα κανονικό div HTML μοιάζει με αυτό:

<div>div>

Ενώ το ισοδύναμο Framer Motion μοιάζει με αυτό:

<κίνηση.διβ>κίνηση.διβ>

Τα στοιχεία κίνησης υποστηρίζουν ένα έμψυχος στήριγμα που ενεργοποιεί κινούμενα σχέδια όταν αλλάζουν οι τιμές του. Για πολύπλοκα κινούμενα σχέδια, χρησιμοποιήστε το χρήση Animate άγκιστρο με βεληνεκές ref.

Κινούμενα σχέδια σε Framer Motion

Πριν χρησιμοποιήσετε το Framer Motion στο έργο σας, πρέπει να έχετε το

Χρόνος εκτέλεσης Node.js και τον διαχειριστή πακέτων Yarn που είναι εγκατεστημένος στον υπολογιστή σας και κατανοήστε τι είναι το React και πώς να το χρησιμοποιήσετε.

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

Ανοίξτε το τερματικό σας και εκτελέστε:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
νήμα
νήματα dev

Όταν ανοίγεις localhost: 5173 στο πρόγραμμα περιήγησής σας, θα δείτε αυτό:

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

Ανοιξε το src/App.jsx αρχείο σε πρόγραμμα επεξεργασίας κώδικα. Αυτό το αρχείο περιέχει ένα λειτουργικό στοιχείο που επιστρέφει ένα τμήμα React. Εισαγάγετε το Κουμπί συστατικό, στη συνέχεια αποδώστε το, περνώντας σε α κείμενο στήριγμα:


Κουμπί κινουμένων σχεδίων</h4>
Μετακινήστε το ποντίκι σας πάνω από το κουμπί για να δείτε το εφέ</div>

Στη συνέχεια, επεξεργαστείτε το Κουμπί.jsx αρχείο και εισαγωγή του κίνηση χρησιμότητα από καρέ-κίνηση:

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

Τώρα, αντικαταστήστε το κανονικό κουμπί στοιχείο με το κίνηση.[στοιχείο] συστατικό. Σε αυτή την περίπτωση, χρησιμοποιήστε το κίνηση.κουμπί συστατικό.

Στη συνέχεια προσθέστε ένα ενώ Hover υποστηρίξτε χειρονομίες και μεταβιβάστε ένα αντικείμενο τιμών στις οποίες πρέπει να κινείται το Framer Motion όταν ένας χρήστης τοποθετεί τον δείκτη του ποντικιού πάνω από το κουμπί.

κλίμακα: 1.1 }}>
{κείμενο}
</motion.button>

Το κουμπί θα ενεργοποιείται τώρα όταν μετακινείτε το δείκτη του ποντικιού πάνω ή έξω από αυτό:

Ίσως αναρωτιέστε γιατί δεν χρησιμοποιείται αυτή η επίδειξη Κινούμενα σχέδια CSS αντι αυτου. Το Framer Motion έχει πλεονεκτήματα σε σχέση με το CSS επειδή ενσωματώνεται με την κατάσταση React και γενικά οδηγεί σε καθαρότερο κώδικα.

Στη συνέχεια, δοκιμάστε κάτι πιο περίπλοκο: να δημιουργήσετε κίνηση σε ένα modal. Σε Backdrop.jsx, εισαγάγετε το βοηθητικό πρόγραμμα κίνησης και δημιουργήστε ένα λειτουργικό στοιχείο με στο κλικ και παιδιά στηρίγματα. Επιστροφή α κίνηση.διβ συστατικό με κλάση "σκηνικό" και στο κλικ ακροατής στο JSX.

εξαγωγήΠροκαθορισμένολειτουργίασκηνικό() {
ΕΠΙΣΤΡΟΦΗ (<>

 </motion.div>
 </>)
}

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

Προσθήκη στο κλικ και παιδιά στηρίγματα στο κίνηση.διβ και ορίστε τη διάρκεια μετάβασης σε 0,34 δευτερόλεπτα:

εξαγωγήΠροκαθορισμένολειτουργίασκηνικό ({onClick, παιδιά}){
ΕΠΙΣΤΡΟΦΗ (<>
 onClick={onClick}
 className="σκηνικό"
 αρχικό={{ αδιαφάνεια: 0, BackdropFilter:"θάμπωμα (0px)" }}
 έμψυχο={{ αδιαφάνεια: 1, BackdropFilter:"θάμπωμα (3,4 εικονοστοιχεία)" }}
 έξοδο={{ αδιαφάνεια: 0, BackdropFilter:"θάμπωμα (0px)"}}
 μετάβαση={{
 διάρκεια: 0.34,
 }}
 >
 {παιδιά}
 </motion.div>
 </>)
}

ο σκηνικό συστατικό είναι ένα περιτύλιγμα για το Τροπικός συστατικό. Κάνοντας κλικ στο φόντο απορρίπτεται το modal. Σε Modal.jsx, εισαγωγή κίνηση και το στοιχείο Backdrop. Το προεπιλεγμένο λειτουργικό στοιχείο δέχεται στηρίγματα: κλείσιμοModal και κείμενο. Δημιουργήστε μια μεταβλητή ως αντικείμενο.

συνθ παραλλαγές = {
 αρχικό: {
 y: "-200%",
 αδιαφάνεια: 1,
 },
 ορατό: {
 y: "50%",
 μετάβαση: {
 διάρκεια: 0.1,
 τύπος: "άνοιξη",
 απόσβεση: 32,
 ακαμψία: 500
 }
 },
 έξοδος: {
 y: "200%",
 }
 }

Επιστρέψτε ένα στοιχείο motion.div που είναι τυλιγμένο από ένα στοιχείο Backdrop με ένα στήριγμα "παραλλαγές" που δείχνει προς το αντικείμενο παραλλαγών. Οι παραλλαγές είναι ένα σύνολο από προκαθορισμένες καταστάσεις κινούμενων εικόνων στις οποίες θα μπορούσε να βρίσκεται το στοιχείο.


 onClick={(e) => e.stopPropagation()}
 className="τροπικός"
 παραλλαγές={παραλλαγές}
 αρχικό='αρχικός'
 εμψυχώ='ορατός'
 έξοδος='έξοδος'
 >
 {κείμενο}
 </motion.div>
</Backdrop>

Στη συνέχεια, πρέπει να προσθέσετε τη λειτουργικότητα για να εμφανιστεί το modal όταν ένας χρήστης κάνει κλικ στο κουμπί. Ανοιξε το App.jsx αρχείο και εισαγωγή του χρήση Κατάσταση React hook και το Τροπικός συστατικό.

εισαγωγή { useState } από"αντιδρώ";
εισαγωγή Τροπικός από"./components/Modal";

Στη συνέχεια δημιουργήστε ένα modalOpen κατάσταση με την προεπιλεγμένη τιμή σε ψευδής.

συνθ [modalOpen, setModalOpen] = useState(ψευδής);

Στη συνέχεια, ορίστε μια συνάρτηση κλείσιμοModal που θέτει το modalOpen σε ψεύτικο.

λειτουργίακλείσιμοModal() {
 setModalOpen(ψευδής)
}

Στο επάνω μέρος του τμήματος React, αποδώστε υπό όρους a Τροπικός συστατικό και περάστε το κατάλληλο κείμενο στήριγμα με το στήριγμα closeModal.

{modalOpen && <Τροπικόςκείμενο="Αυτό είναι ένα modal animated με Framer Motion"}

Στη συνέχεια, στο δεύτερο Ενότητα στοιχείο, απόδοση α κουμπί στοιχείο με ένα πρόγραμμα χειρισμού συμβάντων onClick που ορίζει το modalOpen σε false.

Μπορεί να παρατηρήσετε ότι το React αποπροσαρτά το στοιχείο Modal από το DOM χωρίς κινούμενη εικόνα εξόδου. Για να το διορθώσετε, χρειάζεστε ένα AnimatePresence συστατικό. Εισαγωγή AnimatePresence από καρέ-κίνηση.

εισαγωγή {AnimatePresence} από'framer-motion';

Τώρα, τυλίξτε το στοιχείο Modal στο στοιχείο AnimatePresence και ορίστε το αρχικός στήριγμα στο ψευδές και το τρόπος περιμένω".

ψευδής} mode="Περίμενε">
 {modalOpen && <Τροπικόςκείμενο="Αυτό είναι ένα modal animated με Framer Motion"κλείσιμοModal={closeModal} />}
</AnimatePresence>

Το στοιχείο AnimatePresence επιτρέπει την ολοκλήρωση των κινούμενων εικόνων εξόδου πριν το React αποπροσαρτήσει από το DOM.

Το Framer Motion μπορεί να κινήσει στοιχεία σε κύλιση χρησιμοποιώντας το ενώ InView στήριγμα. Ανοιξε το ScrollElement.jsxκαι εισάγετε το κίνηση χρησιμότητα. Αλλαγή div προς την κίνηση.διβ με κλάση "scroll-element".

 αρχικό={{ αδιαφάνεια: 0, κλίμακα: 0, γυρίζω: 14 }}
 whileInView={{ αδιαφάνεια: 1, κλίμακα: 1, γυρίζω: 0 }}
 μετάβαση={{ διάρκεια: .8 }}
 viewport={{ μια φορά: αληθής }}
 className='scroll-στοιχείο'
>
 Στοιχείο κύλισης
</motion.div>

ο θέαση το prop δείχνει σε ένα αντικείμενο που θέτει μια φορά προς την αληθής. Στη συνέχεια, στο App.jsx αρχείο, εισάγετε το ScrollElement συστατικό και ορίστε μια μεταβλητή scrollElementCount που περιέχει μια ακέραια τιμή.

αφήνω scrollElementCount=14;

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

{[...Array (scrollElementCount)].map((x, i) =><ScrollElementκλειδί={Εγώ} />)}

Τώρα, επιστρέφοντας στο πρόγραμμα περιήγησης, τα στοιχεία θα πρέπει να κινούνται όταν τα μετακινείτε στην προβολή.

Εναλλακτικές λύσεις στο Framer Motion

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

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

Βελτίωση της εμπειρίας χρήστη με κινούμενα σχέδια

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