Πώς να χρησιμοποιήσετε την αντιδράσει την άνοιξη για να ζωντανέψει συστατικά

Το Realt Spring μπορεί να σας βοηθήσει με κινούμενα σχέδια, τα οποία είναι απαραίτητα δύσκολα να εφαρμόσουν στον ιστό. CSS Animations Είναι η καλύτερη επιλογή, αλλά δημιουργώντας ένα ομαλό αποτέλεσμα, απαιτεί προσεκτική juggling τάξεων, διάρκειας και γεγονότων. Ρίχνοντας ένα Πλαίσιο JavaScript Όπως αντιδρά στο μίγμα, περιπλέκει μόνο τα πράγματα περαιτέρω.

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

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

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

Σε αυτό το σεμινάριο, θα κάνουμε ένα στοιχείο καρτών που επιτρέπει στους χρήστες να αξιολογούν τις εικόνες. Η κάρτα Flips για να αποκαλύψει μια βαθμολογία Star και οι χρήστες μπορούν να κάνουν κλικ για να προσθέσουν τη δική τους. Θα χρησιμοποιήσουμε την αντιδραστική εφαρμογή των νεότερων άγκιστρων της άνοιξης, η οποία απαιτεί αντιδράσει την έκδοση 16,8 ή παραπάνω. Πριν ξεκινήσεις, Κατεβάστε τα αρχεία φροντιστηρίων εδώ (και πίσω τα μέσα αποθήκευση σύννεφων ).

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

01. Εγκαταστήστε εξαρτήσεις

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

Στη γραμμή εντολών, εντοπίστε τα αρχεία του έργου και την εγκατάσταση και, στη συνέχεια, εκτελέστε τα.

 & GT; νήμα
& gt; Έναρξη νήματος 

02. Δημιουργήστε εικόνες σε κατάσταση

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

 const [κάρτες] = επεξεργασία ([
creatimage (εικόνα1),
creatimage (εικόνα2),
CreateImage (εικόνα3)
]) · 

03. Εμφάνιση κάθε κάρτας εικόνας

Καθώς οι εικόνες αποθηκεύονται σε μια σειρά, μπορούμε να βρούμε πάνω από αυτό το κράτος και να δημιουργήσουμε ξεχωριστά συστατικά για το καθένα. Η λογική κινούμενων εικόνων για την αντίδραση άνοιξη θα ζήσει μέσα σε ένα & lt; ratingscard / & gt; Συστατικό που μπορούμε να χρησιμοποιήσουμε οπουδήποτε πρέπει να.

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

 {cards.map ((κάρτα, δείκτη) = & gt; (
& lt; ratingscard key = {index} {... κάρτα} / & gt;
))} 

04. Προσθέστε τη δομή της κάρτας

Πριν μπορέσουμε να προσθέσουμε το κινούμενο σχέδιο, η κάρτα χρειάζεται κάποιο περιεχόμενο. Κάθε κάρτα έχει μπροστά και πίσω, τα οποία υλοποιούνται ως ξεχωριστά & lt; div & gt; τα στοιχεία που στρέφονται το ένα πάνω στο άλλο.

Ανοιξε Ratingscard / index.js , και προσθέστε τη δομή της κάρτας. Πρέπει να εφαρμόσουμε την εικόνα ως φόντο στην μπροστινή κάρτα, με την πλάτη τελικά να περιέχει την αξιολόγηση.

 & lt; div classname = "ratingscard" & gt;
& lt; div
classname = "ratingscard__front"
στυλ = {{{{{
backgroundimage: `url ($ {image})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Εφαρμόστε στυλ hourt

Οποιαδήποτε στυλ που δεν ενημερώνονται άμεσα μέσω των κινούμενων σχεδίων μας μπορούν να εφαρμοστούν μέσω του CSS. Αυτό περιλαμβάνει το βασικό αποτέλεσμα 3D σκιά για κάθε κάρτα όταν αιωρείται. Μέσα Ratingscard / style.css , προσθέστε μερικά επιπλέον στυλ για να κάνετε την κάρτα να βγαίνει από τη σελίδα στο δείπνο, εφαρμόζοντας ένα φίλτρο.

 .Ratingscard: Τοποθετήστε το {
Φίλτρο: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0,25))
πτώση-σκιά (0 10px 10px
 RGBA (0, 0, 0, 0,1)).
} 

06. Ορίστε σκιά από προεπιλογή

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

 .ratingscard {
[...]
Φίλτρο: Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0,16))
πτώση-σκιά (0 3px 6px
RGBA (0, 0, 0, 0,1)).
Μετάβαση: Φίλτρο 0,5s.
} 

07. Κρατήστε την επιλεγμένη κατάσταση

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

Στην αρχή του Βαθμολογία Λειτουργία εξαρτήματος, δημιουργήστε το ορίστε αυτό επιλεγμένος κατάσταση.

 const [επιλεγμένο, setselected]
 = επεξεργασία (FALSE); 

08. Καθορίστε το animation flip

Το Realt Spring είναι υπεύθυνο για τους αριθμούς μετάβασης μεταξύ μιας τιμής και άλλου. Αυτό μπορεί να γίνει με μια άνοιξη και το συνδυασμός άγκιστρο. Παρέχουμε κάποιες πληροφορίες εγκατάστασης και επιστρέφει ένα σύνολο αξιών που ενημερώνονται σύμφωνα με τους υπολογισμούς της φυσικής του.

Δημιουργήστε ένα ελατήριο για το κινούμενο σχέδιο Flip. Αυτός θα εξασθενίσει και θα περιστρέψει μια κάρτα ανάλογα με το αν η κάρτα είναι μέσα του επιλεγμένος κατάσταση.

 const {αδιαφάνεια, μετασχηματισμός}
 = ΧΡΗΣΗPRING ({
Απενεργοποίηση: Επιλεγμένο; 1: 0,
Μετασχηματισμός: `Περιστροφή (
$ {επιλεγμένο; 180: 0} deg) `
}) · 

09. Μετατρέψτε σε κινούμενο δοχείο

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

Μετατρέψτε το Βαθμολογία στοιχείο χρήσης του κινούμενος λειτουργία. ο animated.div Η σύνταξη λέει τη λειτουργία να επιστρέψει ένα & lt; div & gt; .

 & lt; animated.div classname = "ratingscard" & gt;
& lt; animated.div
classname = "ratingscard__front"
στυλ = {{{{{
backgroundimage: `url ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
"Ratingscard__back" / & gt;
& lt; /ανα εξουσιοδοτημένο.div> 

10. Εισάγετε την μπροστινή κάρτα

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

 & lt; animated.div
classname = "ratingscard__front"
στυλ = {{{{{
backgroundimage: `url ($ {image})`,
αδιαφάνεια: αδιαφάνεια.Interpolate (
αντίστροφη ικανότητα),
μεταμορφώνω
}}
/ & gt; 

11. Εισάγετε την πίσω κάρτα

Όταν αναστρέφετε την κάρτα, ανεξάρτητα από την κίνηση που εφαρμόζουμε σε μία όψη θα πρέπει να εφαρμοστεί αντίστροφα στο άλλο. Όταν παίζονται μαζί, θα φαίνονται σαν να κινούνται ως ένα κομμάτι.

Σε αυτή την περίπτωση, πρέπει να εφαρμόσουμε τα ίδια στυλ στην πίσω κάρτα, αλλά αυτή τη φορά παρεμβαίνει το μεταμορφώνω αξία αντ 'αυτού.

 & lt; animated.div
classname = "ratingscard__back"
στυλ = {{{{{
αδιαφάνεια,
Μετασχηματισμός: Μετασχηματισμός
.Interpolate (Inversetransform)
}}
/ & gt; 

12. Interpolate τις τιμές

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

Καθορίστε μερικές λειτουργίες παρεμβολής προς την κορυφή του Ratingscard / index.js . Αυτά εφαρμόζουν το αντίστροφο τόσο της αδιαφάνειας όσο και των κινούμενων εικόνων μετασχηματισμού κατά την επιλογή ή την κατάργηση.

const αντίστροφη ικανότητα = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {t} Περιστροφή (180deg)` 

13. Αντικαταστήστε το κράτος στο κλικ

Η αναστροφή της κάρτας πρέπει να συνδέεται με ένα κλικ. Ως επιλεγμένος Η ονομαστική αξία καθορίζει ποιο πρόσωπο είναι ορατό, θα πρέπει να αλλάξουμε αυτό το κράτος όταν κάνετε κλικ στην κάρτα.

Προσθέστε έναν ακροατή κλικ στο εξωτερικό Βαθμολογία στοιχείο. Όταν συμβεί αυτό, θα αλλάξει η τιμή Boolean που κρατείται σε κατάσταση.

 & lt; animated.div
clipname = "ratingscard"
onclick = {() = & gt;
Ορίστε την επιλεγμένη (! Επιλεγμένη)}
& gt; 

14. Προσαρμογή της κάρτας Flip Physics

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

 ΧρέωσηPring ({
Config: {
Τριβή: 22,
ένταση: 500
},
[...]
}) · 

15. Δημιουργία ελατηρίου για το αποτέλεσμα κλίσης

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

 const [props, set] = χρήσηpring (() = & gt; ({{
Κράτος: [0, 0, 1]
}
)) · 

16. Εφαρμόστε στυλ κλίσης

Το Realt Spring μπορεί να ζωντανέψει πολλούς διαφορετικούς τύπους τιμών, οι οποίες περιλαμβάνουν πίνακες. Η αποθήκευση των αξιών μας σε μία σειρά μας επιτρέπει να τα παρεμβάλλουμε όλα αυτά επάνω στο μεταμορφώνω ιδιοκτησία σε ένα πέρασμα.

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

 const meatroscard = (x, y, κλίμακα) = & gt;
 `Προοπτική (1000px) Rotatex ($ {x} deg)
Περιστροφή ($ {y} deg) κλίμακα ($ {scange}) `;
[...]
& lt; animated.div
 clipname = "ratingscard"
 onclick = {() = & gt; Ορίστε την επιλεγμένη (! Επιλεγμένη)}
 Στυλ = {{μετασχηματισμός:! Επιλεγμένο & amp; & amp;
tops.state.interpolate (
meatroscard)}}} & gt; 

17. Ορισμός τιμών στην κίνηση του ποντικιού

Τα συμβάντα του ποντικιού παρέχουν τις συντεταγμένες του δρομέα εκείνη την εποχή. Μας ενδιαφέρει οι συντεταγμένες πελάτη για να πάρουν τη θέση του δρομέα μέσα στο παράθυρο προβολής. Προσθέστε κίνηση του ποντικιού και αφήστε τα γεγονότα στο εξωτερικό & lt; div & gt; . Περάσαμε τις συντεταγμένες σε μια λειτουργία σε κίνηση και επαναφορά στις προεπιλεγμένες τιμές όταν ο δρομέας αφήνει το & lt; div & gt; .

 onmouseleave = {() = & gt; σειρά({
 Κράτος: [0, 0, 1]})}
onmousemove = {({clientx: x,
 Clienty: y}) = & gt; σειρά({
 Κράτος: CalculateValues ​​(x, y)})
} 

18. Υπολογίστε τις τιμές κινούμενων εικόνων

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

Δημιουργήστε τη λειτουργία για να συμπληρώσετε αυτές τις τιμές. Η διαίρεση κατά 40 μειώνει το αποτέλεσμα κλίσης για να το καταστήσει πιο χρήσιμο. Η τελική τιμή θα αυξήσει οπτικά την κάρτα από την οθόνη.

 Const CalculateValues ​​= (x, y) = & gt; [
- (y - window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1] · 

19. Εμφάνιση βαθμολογίας αστεριών

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

Πρώτον, δημιουργήστε ένα νέο κομμάτι κράτους για να κρατήσετε τη βαθμολογία, στη συνέχεια να δημιουργήσετε ένα & lt; μπριζόλα & gt; συστατικό μέσα στην πλάτη που βλέπει & lt; div & gt; .

 const [pressionrating, sindrating]
 = επεξεργασία (βαθμολογία);
[...]
{Επιλεγμένο & amp; & amp; (
 & LT; Trating Rating = {Presentrating}
Sindrating = {setrating} / & gt;
)} 

20. Δημιουργήστε κινούμενα σχέδια αστεριών

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

Ανοίγω Πινακίδα / Ευρετήριο.js και προσθέστε το γάντζο μέσα. Το πρώτο επιχείρημα θα ορίσει τον αριθμό των πηγών που θα κάνουν.

 const animatedstars = usetrail (5, {
Config: {
Τριβή: 22,
ένταση: 500
},
Από: {αδιαφάνεια: 0,
Μετατροπή: "Κλίμακα (0,8)"},
αδιαφάνεια: 1,
Μετασχηματισμός: "Κλίμακα (1)"
}) · 

21. Εφαρμόστε αστέρια στο Component

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

Για κάθε αστέρι, δείξτε ένα & lt · animatedstar & gt; συστατικό μέσα στο κύριο Πρωθυπουργός div. Διαδώστε τα στηρίγματα στυλ για να εφαρμόσετε όλες τις επιδράσεις σε κάθε συστατικό. Όταν κάνετε κλικ, στείλτε τη νέα βαθμολογία στον γονέα & lt; astractcard & gt; συστατικό.

 {Animatedstars.map ((στηρίγματα, δείκτη) = & gt; (
& lt · Animatedstar
Active = {index + 1 & lt; = βαθμολογία}
onclick = {e = & gt; {
E.Stoppropation ();
Sindrating (Ευρετήριο + 1).
}}
κλειδί = {index}
στυλ = {{... στηρίγματα}}
/ & gt;
))} 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράζουν τεύχος 288 ή Εγγραφείτε .

Διαβάστε περισσότερα:

• Αναπτύξτε επαναχρησιμοποιούμενα συστατικά αντιδράσεων
• Οι καλύτεροι φορητοί υπολογιστές για τον προγραμματισμό το 2019
• 35 εργαλεία σχεδιασμού ιστοσελίδων για να σας βοηθήσουν να εργαστείτε πιο έξυπνα