Χρησιμοποιήστε τη συνεχή κίνηση για να βελτιώσετε την εμπειρία χρήστη στην εφαρμογή React Native και να την κάνετε πιο σαγηνευτική και ζωντανή.
Ένα από τα βασικά χαρακτηριστικά του Animated API της React Native είναι το Animated.loop() μέθοδο με την οποία μπορείτε να δημιουργήσετε συνεχή κινούμενη εικόνα που επαναλαμβάνεται επ' αόριστον.
Θα εξερευνήσουμε πώς να χρησιμοποιήσουμε τη μέθοδο Animated.loop() για τη δημιουργία συνεχούς κινούμενης εικόνας στο React Native και θα μάθουμε πώς να προσαρμόζουμε και να βελτιώνουμε αυτές τις κινούμενες εικόνες.
Κατανόηση της μεθόδου Animated.loop().
Για να χρησιμοποιήσετε τη μέθοδο Animated.loop(), πρέπει πρώτα να δημιουργήσετε ένα Κινούμενα σχέδια. αξία αντικείμενο. Αυτή η τιμή ενημερώνεται σε κάθε καρέ του βρόχου κινούμενης εικόνας και θα χρησιμοποιηθεί για την κίνηση του στοιχείου προορισμού.
Μόλις το Animated. Το αντικείμενο τιμής έχει δημιουργηθεί, μπορείτε να το μεταβιβάσετε στη μέθοδο Animated.loop() μαζί με ένα αντικείμενο διαμόρφωσης κινούμενης εικόνας που καθορίζει τη συμπεριφορά της κίνησης.
Αυτό το αντικείμενο διαμόρφωσης μπορεί να περιλαμβάνει ιδιότητες όπως διάρκεια, χαλάρωση, και καθυστέρηση, τα οποία καθορίζουν πώς θα συμπεριφερθεί η κινούμενη εικόνα.
Looping Your Animation
Από προεπιλογή, η μέθοδος Animated.loop() δημιουργεί έναν άπειρο βρόχο της κινούμενης εικόνας, που σημαίνει ότι η κινούμενη εικόνα θα συνεχίσει να επαναλαμβάνεται μέχρι να διακοπεί με μη αυτόματο τρόπο. Ωστόσο, μπορείτε να καθορίσετε μια διάρκεια για τον βρόχο κινούμενης εικόνας ορίζοντας το επαναλήψεις ιδιότητα στο αντικείμενο διαμόρφωσης κινούμενων εικόνων.
Το ακόλουθο παράδειγμα που δείχνει πώς να χρησιμοποιήσετε το Animation.loop() για να δημιουργήσετε μια κινούμενη εικόνα περιστροφής με βρόχο:
εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { StyleSheet, View, Animated, Image } από'react-native';εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [spinValue] = useState(νέος Κινούμενα σχέδια. Αξία(0));useEffect(() => {
συνθ spin = spinValue.interpolate({
Εύρος εισόδου: [0, 1],
Εύρος εξόδου: ['0 βαθμοί', '360 μοίρες'],
});Animated.loop(
Animated.timing(
spinValue,
{
toValue: 1,
διάρκεια: 2000,
useNativeDriver: αληθής,
}
)
).αρχή();
}, []);ΕΠΙΣΤΡΟΦΗ (
στυλ={{ πλάτος: 200, ύψος: 200, μεταμορφώνω: [{ γυρίζω: spinValue }] }}
πηγή={{ uri: ' https://reactjs.org/logo-og.png' }}
/>
</View>
);
}
συνθ styles = StyleSheet.create({
δοχείο: {
καλώδιο: 1,
στοίχιση στοιχείων: 'κέντρο',
justifyContent: 'κέντρο',
},
});
Σε αυτό το παράδειγμα, δημιουργούμε ένα Animated. Κλήση αντικειμένου τιμής spinValue και ορίστε την αρχική του τιμή στο 0. Στη συνέχεια καλούμε το βρόχος() μέθοδος στο Animated.timing() αντικείμενο, το οποίο λαμβάνει ως όρισμα την κατάσταση spinValue. Το αντικείμενο Animated.timing() περιγράφει πώς η κινούμενη εικόνα θα εξελιχθεί με την πάροδο του χρόνου και σε αυτήν την περίπτωση, περιστρέφει μια εικόνα κατά 360 μοίρες.
Για να ορίσουμε τη διάρκεια του βρόχου, περάσαμε α διάρκεια ιδιότητα στο αντικείμενο Animated.timing(), το οποίο θα καθορίσει πόσο χρόνο θα εκτελεστεί η κινούμενη εικόνα πριν από την επαναφορά. Ορίσαμε την ιδιότητα duration σε 2000, που σημαίνει 2 δευτερόλεπτα πριν την επανεκκίνηση.
Μπορείτε επίσης να ορίσετε πόσες φορές θα επαναλαμβάνεται η κινούμενη εικόνα περνώντας το επαναλήψεις ιδιότητα στη μέθοδο loop().
Για παράδειγμα, ας υποθέσουμε ότι θέλετε η κινούμενη εικόνα να επαναλαμβάνεται πέντε φορές πριν σταματήσει. Σε αυτήν την περίπτωση, μπορείτε να καλέσετε την Animated.loop() με επαναλήψεις: 5. Εάν θέλετε η κινούμενη εικόνα να επαναλαμβάνεται επ' αόριστον, μπορείτε να παραλείψετε το επαναλήψεις ιδιοκτησία πλήρως.
Χρησιμοποιώντας το Animation.loop(), ορίζοντας τη διάρκειά του και εφαρμόζοντας σωστά το στυλ CSS στο επιστρεφόμενο αντικείμενο προβολής, μπορείτε να δημιουργήσετε κινούμενα σχέδια με ομαλό βρόχο στο React Native.
Εργασία με σύνθετα κινούμενα σχέδια
Η εργασία με πολύπλοκα κινούμενα σχέδια δεν είναι τόσο απλή όσο η εργασία με μεμονωμένα κινούμενα σχέδια. Συνήθως απαιτούν λίγο περισσότερη δουλειά για να διασφαλίσουν ότι συμπεριφέρονται όπως αναμένεται.
Ακολουθούν δύο συμβουλές που θα σας βοηθήσουν κατά την επαναφορά σύνθετων κινούμενων εικόνων στο React Native:
1. Σπάστε το κινούμενο σχέδιο σε μικρότερα μέρη
Μπορείτε να αναλύσετε σύνθετα κινούμενα σχέδια σε μικρότερα, απλούστερα κινούμενα σχέδια που μπορούν να επαναληφθούν μεμονωμένα. Για παράδειγμα, ένα σύνθετο κινούμενο σχέδιο που περιλαμβάνει και περιστροφή και μετάφραση μπορεί να αναλυθεί σε δύο ξεχωριστά κινούμενα σχέδια, τα οποία θα επαναληφθούν ανεξάρτητα. Σπάζοντας το κινούμενο σχέδιο σε μικρότερα μέρη, μπορείτε να απλοποιήσετε τον κώδικα και να τον χειριστείτε πιο εύκολα.
2. Χρησιμοποιήστε τη μέθοδο Animated.sequence().
ο Animated.sequence() μέθοδος σας επιτρέπει να εκτελέσετε μια ακολουθία κινούμενων εικόνων το ένα μετά το άλλο. Αυτή η μέθοδος μπορεί να δημιουργήσει σύνθετα κινούμενα σχέδια με βρόχο, αλυσοδώντας κινούμενα σχέδια ενός βρόχου. Μπορείτε να χρησιμοποιήσετε το Animated.sequence() για να δημιουργήσετε μια κινούμενη εικόνα που πρώτα ξεθωριάζει σε μια εικόνα, την περιστρέφει και στη συνέχεια την εξαφανίζει, επαναλαμβάνοντας ολόκληρη τη σειρά μόλις ολοκληρωθεί.
Αυτές οι συμβουλές παρέχονται μαζί με το γενικές συμβουλές για τη βελτιστοποίηση των εφαρμογών React Native θα σας βοηθούσε να δημιουργήσετε κινούμενα σχέδια με βρόχο απόδοσης.
Πειραματιστείτε με το κινούμενο σχέδιο σας
Τα κινούμενα σχέδια με βρόχο στο React Native μπορούν να είναι ένα ισχυρό εργαλείο για τη δημιουργία μιας πιο ελκυστικής και δυναμικής εμπειρίας χρήστη. Θα πρέπει να πειραματιστείτε με διαφορετικές τεχνικές για τη δημιουργία κινούμενων εικόνων με βρόχο για να επιτύχετε τόσο οπτικά ελκυστικό όσο και εντυπωσιακό animation.