Ξεκινώντας με τα κινούμενα σχέδια στο React Native

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

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

Πώς λειτουργούν οι εγγενείς κινούμενες εικόνες Basic React;

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

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

Μπορείτε να κάνετε κίνηση σε ένα αντικείμενο React Native απλά αλλάζοντας την κατάσταση θέσης του επιθυμητού στοιχείου.

Για παράδειγμα:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { Προβολή, φύλλο στυλ } από'react-native';
συνθ Εφαρμογή = () => {
// Αρχικοποίηση κατάστασης για παρακολούθηση της θέσης του πλαισίου
συνθ [boxPosition, setBoxPosition] = useState(0);
// Χρησιμοποιήστε το άγκιστρο useEffect για να ενημερώνετε τη θέση του πλαισίου κάθε 1 δευτερόλεπτο
 useEffect(() => {
συνθ διάστημα = setInterval(() => {
// Ενημερώστε τη θέση του πλαισίου προσθέτοντας 10 στην τρέχουσα θέση
 setBoxPosition(προθέση => prevPosition + 10);
 }, 1000);
// Επιστρέψτε μια συνάρτηση εκκαθάρισης για να διαγράψετε το διάστημα όταν το στοιχείο
// αποπροσαρτάται
ΕΠΙΣΤΡΟΦΗ() => clearInterval (διάστημα);
 }, []);
// Ορίστε τη θέση του πλαισίου χρησιμοποιώντας τη μεταβλητή κατάστασης στο ενσωματωμένο στυλ
συνθ boxStyle = {
 μεταμορφώνω: [{ μεταφράστεΥ: boxPosition }]
 };
ΕΠΙΣΤΡΟΦΗ (


 </View>
 );
};
συνθ styles = StyleSheet.create({
 δοχείο: {
 καλώδιο: 1,
 στοίχιση στοιχείων: 'κέντρο',
 justifyContent: 'κέντρο',
 },
 πλαίσιο: {
 πλάτος: 100,
 ύψος: 100,
 χρώμα του φόντου: 'μπλε',
 },
});
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κωδικός αποδίδει ένα μπλε πλαίσιο που κινείται προς τα κάτω κάθε δευτερόλεπτο. Το κινούμενο σχέδιο λειτουργεί χρησιμοποιώντας το useEffect γάντζο για να δημιουργήσετε ένα χρονόμετρο που ενημερώνει το κουτί Θέση μεταβλητή κατάστασης κάθε 1 δευτερόλεπτο.

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

Είναι πολλές βιβλιοθήκες κινούμενων σχεδίων όπως η Κινούμενα σχέδια βιβλιοθήκη, react-native-reanimated, και αντιδρώ-εγγενής-ζωντανός για τη δημιουργία κινούμενων εικόνων στο React Native. Κάθε μία από αυτές τις βιβλιοθήκες κινούμενων εικόνων σβήνει το ζήτημα των ενημερώσεων ασύγχρονης κατάστασης και είναι τέλεια.

Το React Native Animated API

Το Animated είναι ένα API που παρέχει το React Native. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε ομαλά κινούμενα σχέδια που ανταποκρίνονται στις αλληλεπιδράσεις των χρηστών ή στις αλλαγές κατάστασης.

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

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

Για να ξεκινήσετε να χρησιμοποιείτε το Animated στο έργο σας React Native, πρέπει να εισαγάγετε το Κινούμενα σχέδια ενότητα από 'react-native» στον κωδικό σας:

εισαγωγή { Κινούμενα σχέδια } από'react-native';

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

συνθ animatedValue = νέος Κινούμενα σχέδια. Αξία(0);

ο Κινούμενα σχέδια. αξία είναι μια κλάση στο React Native Animated API που αντιπροσωπεύει μια μεταβλητή τιμή. Μπορείτε να το αρχικοποιήσετε με μια αρχική τιμή και στη συνέχεια να το ενημερώσετε με την πάροδο του χρόνου χρησιμοποιώντας διάφορες μεθόδους κινούμενης εικόνας που παρέχονται από το Animated API, όπως .συγχρονισμός(), .άνοιξη(), και .φθορά(), καθορίζοντας τη διάρκεια της κινούμενης εικόνας, τη λειτουργία easing και άλλες παραμέτρους.

Η κινούμενη τιμή είναι παρόμοια με μια τιμή κατάστασης σε ένα στοιχείο React.

Μπορείτε να αρχικοποιήσετε ένα Κινούμενα σχέδια. αξία με την αρχική τιμή κατάστασης ενός στοιχείου και, στη συνέχεια, ενημερώστε το με την πάροδο του χρόνου χρησιμοποιώντας το setState μέθοδος.

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

Μπορείτε να δημιουργήσετε ένα Κινούμενα σχέδια. αξία και αρχικοποιήστε το με την τιμή αρχικής κατάστασης του μετρώ:

συνθ Εφαρμογή = () => {
συνθ [count, setCount] = useState(0);
συνθ animatedValue = νέος Κινούμενα σχέδια. Αξία (μέτρηση);
};

Στη συνέχεια, όποτε το μετρώ κατάσταση ενημερώσεις αξίας, μπορείτε να ενημερώσετε animatedValue πολύ:

συνθ κουμπί χειρισμούΚλικ = () => {
 setCounter (count + 1);
 Animated.timing (animatedValue, {
 toValue: count + 1,
 διάρκεια: 500,
 useNativeDriver: αληθής
 }).αρχή();
};

Αυτό το παράδειγμα ενημερώνεται animatedValue χρησιμοποιώντας την Animated.timing() κάθε φορά που ένας χρήστης κάνει κλικ στο κουμπί. ο animatedValue οδηγεί το κινούμενο σχέδιο και αλλάζει τιμή σε 500 χιλιοστά του δευτερολέπτου.

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

Τώρα καταλαβαίνετε πώς να χειρίζεστε μια κινούμενη τιμή, μπορείτε στη συνέχεια να προχωρήσετε στην παρεμβολή της τιμής κινουμένων σχεδίων και να την αντιστοιχίσετε σε μια ιδιότητα στυλ του στοιχείου σας χρησιμοποιώντας το Animated.interpolate() μέθοδος.

Για παράδειγμα:

συνθ opacity = animatedValue.interpolate({
 Εύρος εισόδου: [0, 1],
 Εύρος εξόδου: [0, 1]
});
ΕΠΙΣΤΡΟΦΗ (

 {/* το περιεχόμενο του στοιχείου σας */}
 </View>
);

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

Κατανόηση των τύπων κινουμένων σχεδίων

Η κατανόηση των τύπων κινούμενων εικόνων και του τρόπου λειτουργίας τους είναι σημαντική για τη δημιουργία καλών κινούμενων εικόνων.

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

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

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

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

Νιώστε άνετα με τα React Native Animations

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

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