Πώς να δημιουργήσετε Better React Native Animations

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

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

React Native Animations

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

Οπως ακριβώς Η ενσωματωμένη βιβλιοθήκη κινούμενων εικόνων του React, το Animated API είναι μέρος της βιβλιοθήκης Animated που βασίζεται σε JavaScript. Το Animated παρέχει ένα σύνολο κλάσεων και μεθόδων που σας επιτρέπουν να δημιουργείτε ομαλά και ρευστά κινούμενα σχέδια. Υπάρχουν πολλές άλλες εξαιρετικές επιλογές για τη δημιουργία κινούμενων εικόνων React Native, όπως το Reanimated.

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

Προσαρμογή της διάρκειας κινουμένων σχεδίων

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

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

Θα πρέπει να προσαρμόσετε τη διάρκεια του κινούμενου σχεδίου ανάλογα με την πολυπλοκότητά του. Ένα απλό κινούμενο σχέδιο, όπως το fade-in, μπορεί να χρειάζεται μόνο μικρή διάρκεια, ενώ ένα πιο σύνθετο animation, όπως ένα slide-in με εφέ αναπήδησης, μπορεί να χρειαστεί να διαρκέσει περισσότερο, για να είναι φυσικό και ομαλό.

Με την Animation.timing() μέθοδο, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο χρονομετρημένο animation για να ταιριάζει στις ανάγκες σας.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να προσθέσετε μια προσαρμοσμένη διάρκεια σε μια απλή κινούμενη εικόνα fade-in:

εισαγωγή React, { useRef } από'αντιδρώ';
εισαγωγή { Κινούμενα σχέδια, προβολή } από'react-native';
συνθ FadeInView = (στηρίγματα) => {
συνθ fadeAnim = useRef(νέος Κινούμενα σχέδια. Αξία(0)).ρεύμα; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 διάρκεια: 2000, // ορίστε προσαρμοσμένη διάρκεια
 useNativeDriver: αληθής,
 }
 ).αρχή();
 }, [fadeAnim]);
ΕΠΙΣΤΡΟΦΗ (
 στυλ={{
 ...σκηνικά.στυλ,
 αδιαφάνεια: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
καλώδιο: 1, στοίχιση αντικειμένων: 'κέντρο', δικαιολογώ Περιεχόμενο: 'κέντρο'}}>
πλάτος: 250, ύψος: 50, χρώμα του φόντου: 'μπλε σκόνη'}}>
μέγεθος γραμματοσειράς: 28, στοίχιση κειμένου: 'κέντρο', περιθώριο: 10}}>Ατονία σε</Text>
 </FadeInView>
 </View>
 );
}

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

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

Χρησιμοποιήστε Λειτουργίες Διευκόλυνσης

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

Πάρτε αυτό το παράδειγμα χρήσης μιας συνάρτησης διευκόλυνσης:

εισαγωγή React, { useRef } από'αντιδρώ';
εισαγωγή { Κινούμενα σχέδια, προβολή } από'react-native';
συνθ FadeInView = (στηρίγματα) => {
συνθ fadeAnim = useRef(νέος Κινούμενα σχέδια. Αξία(0)).ρεύμα; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 διάρκεια: 2000,
 easing: Animated.easeOut, // χρησιμοποιήστε εδώ τη λειτουργία easing
 useNativeDriver: αληθής,
 }
 ).αρχή();
 }, [fadeAnim]);
ΕΠΙΣΤΡΟΦΗ (
 στυλ={{
 ...σκηνικά.στυλ,
 αδιαφάνεια: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
καλώδιο: 1, στοίχιση αντικειμένων: 'κέντρο', δικαιολογώ Περιεχόμενο: 'κέντρο'}}>
πλάτος: 250, ύψος: 50, χρώμα του φόντου: 'μπλε σκόνη'}}>
μέγεθος γραμματοσειράς: 28, στοίχιση κειμένου: 'κέντρο', περιθώριο: 10}}>Fade In</Text>
 </FadeInView>
 </View>
 );
}

Αυτός ο κώδικας χρησιμοποιεί το Animated.easeOut λειτουργία για τον έλεγχο του ρυθμού αλλαγής της αδιαφάνειας ενός κινούμενου Θέα. ο Animated.timing() Η μέθοδος θα χρησιμοποιήσει τη συνάρτηση ease-out για να αλλάξει σταδιακά την αδιαφάνεια από 0 σε 1 σε διάρκεια δύο δευτερολέπτων, ώστε η κινούμενη εικόνα να φαίνεται να επιβραδύνεται καθώς φτάνει στο τέλος της.

Μπορείτε να χρησιμοποιήσετε διαφορετικούς τύπους λειτουργιών διευκόλυνσης για να κάνετε τα κινούμενα σχέδια σας να φαίνονται πιο ομαλά, συμπεριλαμβανομένων των ease-in, ease-out και ease-in-out.

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

Βοήθεια βασικών καρέ με σύνθετα κινούμενα σχέδια

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

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

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

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

Μπορείτε να δημιουργήσετε έναν πίνακα βασικών καρέ όπως αυτό:

συνθ βασικά καρέ = [
 { Χ: 0, y: 0 },
 { Χ: 50, y: 50 },
 { Χ: 100, y: 100 },
];

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

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

Εκμεταλλευτείτε τη συσκευή με την επιτάχυνση υλικού

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

Στη συνέχεια, η GPU της συσκευής θα επεξεργαστεί εγγενώς τις κινούμενες τιμές και τα στυλ, αντί να χρειάζεται να το κάνει το νήμα JavaScript.

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