Κάντε την εφαρμογή React σας ζωντανή με κινούμενα σχέδια

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

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

Γιατί να χρησιμοποιούμε κινούμενα σχέδια στο React;

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

• Κάνοντας τις αλληλεπιδράσεις να φαίνονται πιο φυσικές. Τα κινούμενα σχέδια μπορούν να βοηθήσουν ώστε οι αλληλεπιδράσεις των χρηστών να είναι πιο φυσικές και ομαλές. Για παράδειγμα, εάν χρησιμοποιείτε ένα στοιχείο εναλλαγής, μπορεί να θέλετε να κάνετε κίνηση του κουμπιού εναλλαγής μεταξύ των καταστάσεων "on" και "off". Ένα άλλο παράδειγμα είναι οι γραμμές προόδου, μπορείτε
  instagram viewer
  δημιουργήστε μια κινούμενη γραμμή προόδου για τις σελίδες της εφαρμογής σας react.
• Παροχή οπτικής ανατροφοδότησης. Τα κινούμενα σχέδια μπορούν να παρέχουν οπτική ανατροφοδότηση στο χρήστη. Για παράδειγμα, εάν ένας χρήστης κάνει κλικ σε ένα κουμπί, μπορεί να θέλετε να κάνετε κίνηση του κουμπιού για να υποδείξετε ότι η εφαρμογή έχει καταχωρίσει αυτήν την ενέργεια.
• Καθοδήγηση της προσοχής του χρήστη. Τα κινούμενα σχέδια μπορούν να καθοδηγήσουν την προσοχή του χρήστη σε ένα συγκεκριμένο στοιχείο. Για παράδειγμα, εάν έχετε ένα παράθυρο διαλόγου που εμφανίζεται στην οθόνη, ίσως θέλετε να χρησιμοποιήσετε κινούμενα σχέδια για να επιστήσετε την προσοχή του χρήστη σε αυτό.
• Δημιουργία αίσθησης επείγοντος.Τα κινούμενα σχέδια μπορούν να δημιουργήσουν μια αίσθηση επείγοντος ή σημαντικού. Για παράδειγμα, εάν έχετε ένα στοιχείο χρονοδιακόπτη που μετράει αντίστροφα, μπορεί να θέλετε να χρησιμοποιήσετε κινούμενα σχέδια για να αντικατοπτρίσετε τον επείγοντα χαρακτήρα καθώς πλησιάζει η προθεσμία.

Υπάρχουν διάφοροι τρόποι για να προσθέσετε κινούμενα σχέδια στα στοιχεία του React. Τα τρία που θα μάθετε να χρησιμοποιείτε εδώ είναι τα inline style animations, η react-animations library και η react-simple-animate library.

Ξεκινήστε δημιουργία μιας βασικής εφαρμογής react, στη συνέχεια ακολουθήστε τη μέθοδο της επιλογής σας.

Μέθοδος 1: Χρήση κινούμενων εικόνων σε στυλ Inline

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

εισαγωγή React, { Component } από 'αντιδρώ';
τάξηFadeInOutεκτείνεταιΣυστατικό{
κατασκευαστής(σκηνικά) {
σούπερ(σκηνικά)
Αυτό.state = {
 είναιΟρατό: ψευδής
 };
 }
render() {
συνθ στυλ = {
αδιαφάνεια: Αυτό.κατάσταση.είναι Ορατό? 1: 0,
 μετάβαση: 'αδιαφάνεια 2s'
 };
ΕΠΙΣΤΡΟΦΗ (
<div>
<div style={styles}>
 Γειά σου Κόσμε!
</div>
<κουμπί onClick={this.toggleVisibility}>
 Μεταβάλλω
</button>
</div>
 );
 }
toggleΟρατότητα = () => {
Αυτό.setState (prevState => ({
είναι Ορατό: !prevState.είναι Ορατό
 }));
 }
}
εξαγωγήΠροκαθορισμένο FadeInOut;

Σε αυτό το παράδειγμα, ένα αντικείμενο στυλ έχει ιδιότητες αδιαφάνειας και μετάβασης. Η αδιαφάνεια είναι 0 όταν το στοιχείο δεν είναι ορατό και 1 όταν είναι. Η ιδιότητα μετάβασης είναι "opacity 2s", η οποία θα προκαλέσει τη μετάβαση της αδιαφάνειας σε διάστημα δύο δευτερολέπτων όταν αλλάξει.

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

Μέθοδος 2: Χρήση της βιβλιοθήκης react-animations

Ένας άλλος τρόπος για να προσθέσετε κινούμενα σχέδια στα στοιχεία του React είναι να χρησιμοποιήσετε μια βιβλιοθήκη όπως τα react-animations. Αυτή η βιβλιοθήκη παρέχει ένα σύνολο προκαθορισμένων κινούμενων εικόνων που μπορείτε να χρησιμοποιήσετε στα στοιχεία του React.

Για να χρησιμοποιήσετε τα react-animations, θα πρέπει πρώτα να εγκαταστήσετε τη βιβλιοθήκη:

npm εγκαθιστώ αντιδρούν-κινούμενα σχέδια --αποθηκεύσετε

Πρέπει επίσης να εγκαταστήσετε το aphrodite, το οποίο είναι μια εξάρτηση από τα react-animations:

npm εγκαθιστώ Αφροδίτη --αποθηκεύσετε

Αφού εγκαταστήσετε τις βιβλιοθήκες, μπορείτε να εισαγάγετε τις κινούμενες εικόνες που θέλετε να χρησιμοποιήσετε:

εισαγωγή { fadeIn, fadeOut } από 'αντίδραση-κινούμενα σχέδια'?

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

εισαγωγή React, { Component } από 'αντιδρώ';
εισαγωγή { StyleSheet, css } από 'Αφροδίτη';
εισαγωγή { fadeIn, fadeOut } από 'αντίδραση-κινούμενα σχέδια'?
συνθ styles = StyleSheet.create({
 ξεθωριάζω: {
 animationΌνομα: fadeIn,
 animationΔιάρκεια: '2s'
 },
 fadeOut: {
 animationΌνομα: fadeOut,
 animationΔιάρκεια: '2s'
 }
});
τάξηFadeInOutεκτείνεταιΣυστατικό{
κατασκευαστής(σκηνικά) {
σούπερ(σκηνικά)
Αυτό.state = {
 είναιΟρατό: ψευδής
 };
 }
render() {
συνθ Όνομα κλάσης = Αυτό.state.isVisible; css (styles.fadeIn): css (styles.fadeOut);
ΕΠΙΣΤΡΟΦΗ (
<div>
<div className={className}>
 Γειά σου Κόσμε!
</div>
<κουμπί onClick={this.toggleVisibility}>
 Μεταβάλλω
</button>
</div>
 );
 }
toggleΟρατότητα = () => {
Αυτό.setState (prevState => ({
είναι Ορατό: !prevState.είναι Ορατό
 }));
 }
}
εξαγωγήΠροκαθορισμένο FadeInOut;

Αυτό το παράδειγμα ξεκινάει με την εισαγωγή των κινούμενων εικόνων fadeIn και fadeOut από τη βιβλιοθήκη react-animations. Στη συνέχεια, ορίζει ένα αντικείμενο στυλ με τα κινούμενα σχέδια fadeIn και fadeOut και το animationDuration ορίζεται σε δύο δευτερόλεπτα.

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

Μέθοδος 3: Χρήση της βιβλιοθήκης react-simple-animate

Η βιβλιοθήκη react-simple-animate παρέχει έναν απλό τρόπο προσθήκης κινούμενων εικόνων στα στοιχεία του React. Προσφέρει ένα δηλωτικό API που διευκολύνει τον ορισμό πολύπλοκων κινούμενων εικόνων.

Για να χρησιμοποιήσετε τη βιβλιοθήκη, πρέπει πρώτα να την εγκαταστήσετε:

npm εγκαθιστώ αντιδρώ-απλός-ζωοποιώ --αποθηκεύσετε

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

εισαγωγή React, { Component } από 'αντιδρώ';
εισαγωγή { Animate, AnimateKeyframes} από "αντιδρώ-απλά-ζωογονώ";
τάξηAppεκτείνεταιΣυστατικό{
 render() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Εμψυχος
 παίζω
αρχή={{
 αδιαφάνεια: 0
 }}
τέλος={{
 αδιαφάνεια: 1
 }}
>
<div>
 Γειά σου Κόσμε!
</div>
</Animate>
<AnimateKeyframes
 παίζω
 διάρκεια={2}
 βασικά καρέ={[
 { αδιαφάνεια: 0, μετασχηματισμός: 'translateX(-100px)' },
 { αδιαφάνεια: 1, μετασχηματισμός: 'translateX(0px)' }
 ]}
>
<div>
 Γειά σου Κόσμε!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

ο Εμψυχος το στοιχείο ξεθωριάζει σε ένα στοιχείο div. Ξεκινά με αδιαφάνεια 0 και τελειώνει με αδιαφάνεια 1. Το στηρίγμα αναπαραγωγής έχει ρυθμιστεί σε true, γεγονός που θα κάνει το κινούμενο σχέδιο να αναπαράγεται αυτόματα όταν τοποθετηθεί το στοιχείο.

ο AnimateKeyframes Το στοιχείο κινεί ένα στοιχείο div σε διάστημα δύο δευτερολέπτων. Ο πίνακας βασικών καρέ καθορίζει τις καταστάσεις έναρξης και λήξης της κινούμενης εικόνας. Το πρώτο βασικό καρέ έχει αδιαφάνεια 0 και τιμή translateX -100 px. Το δεύτερο βασικό καρέ έχει αδιαφάνεια 1 και τιμή translateX 0 px.

Αυξήστε την αφοσίωση των χρηστών με κινούμενα σχέδια

Τώρα γνωρίζετε μερικούς από τους τρόπους με τους οποίους μπορείτε να χρησιμοποιήσετε κινούμενα σχέδια στην εφαρμογή React. Μπορείτε να χρησιμοποιήσετε κινούμενα σχέδια για να αυξήσετε την αφοσίωση των χρηστών στην εφαρμογή σας.

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

Μπορείτε επίσης να αναπτύξετε την εφαρμογή React στον ιστό δωρεάν με υπηρεσίες όπως σελίδες Github ή Heroku.