Ο Matt Perry από τον Framer και ρίχνουμε μια ματιά στη βιβλιοθήκη κινούμενων σχεδίων React Framer Motion.
Πρώτον, ρίχνουμε μια ματιά στο πόσο απλό είναι το API. Μπορείτε να ελέγχετε τα πάντα πολύ δημητικά μέσω στηρίξεων σε στοιχεία στο JSX σας. Ο έλεγχος της κινούμενης εικόνας σε αυτό το επίπεδο είναι πολύ διαισθητικός και συνδέεται με το περιβάλλον χρήστη και την κατάσταση με ουσιαστικό τρόπο.
Κάθε παράδειγμα που εξετάζουμε είναι πιο πραγματικό και περιλαμβάνει περισσότερα χαρακτηριστικά του τι μπορεί να προσφέρει το Framer Motion. Οι προγραμματιστές React θα λατρέψουν τη σύνταξη όλων, και όλοι οι άλλοι θα λατρέψουν τα απίστευτα επιδόματα και τα ομαλά αποτελέσματα.
Τελικά κοιτάζουμε τον ίδιο τον Framer, ο οποίος χρησιμοποιεί αυτήν την ακριβή βιβλιοθήκη εσωτερικά για να κάνει όλα τα κινούμενα σχέδια που κάνει ο Framer. Ενδιαφέρεται για τον Framer; Λήψη του Framer X.
Επίδειξη 1: Βασική σύνταξη
Επίδειξη 2: Παραλλαγές
Επίδειξη 3: AnimatePresence και layoutTransition
Μπόνους: δείτε τη λειτουργία "κύλιση για απόρριψη" στο αναδυόμενο παράθυρο της εικόνας.