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

Γιατί οι Κινήσεις Σημασία στην Αντιδρούν Ιθαγενή

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

Θεμελιώσεις: Οι δύο κινούμενες Powerhouses

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

Το κινούμενο API

Περιλαμβάνεται με React Native, το Animated API[[LPT:1]] λειτουργεί με την εκτέλεση κινουμένων σχεδίων στο νήμα JavaScript. Παρέχει δηλωτικές μεθόδους όπως , , και [[LFT:2]]. Για απλές μεταβάσεις ξεθωριάσεων ή διαφάνειων, είναι απολύτως επαρκής. Ωστόσο, επειδή τα σύνθετα ή συνεχή κινούμενα σχέδια (π.χ., χειρονομίες που καθοδηγούνται) μπορούν να προκαλέσουν jank όταν το νήμα JavaScript είναι απασχολημένο, το Animated API είναι κατάλληλο για απλά, απομονωμένα εφέ.

Ανακαινισμένη Βιβλιοθήκη

Αναπαλαιωμένο[[LFT:1]] (έκδοση 2 ή 3) τρέχει κινούμενα σχέδια στο νήμα UI μέσω worklets, παρακάμπτοντας εντελώς το νήμα JavaScript. Αυτό το καθιστά ιδανικό για υψηλής απόδοσης, χειρονομίες, κινούμενα σχέδια με πολύπλοκες αλυσίδες. Ανανεωμένο προσφέρει ένα πιο ευέλικτο API με γάντζους όπως [[LPT:3]], , και . Ενσωματώνεται απρόσκοπτα με [[[LFT:2]] react-native-gesture-handler[[LFT:3]] για ομαλές αλληλεπιδράσεις. Για οποιαδήποτε εφαρμογή παραγωγής-βαθμού, Reanimated είναι η συνιστώμενη επιλογή.

Βασικές τεχνικές κινουμένων σχεδίων

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

1. Fade In / Fade Out

Η αλλαγή της αδιαφάνειας με την πάροδο του χρόνου είναι ο απλούστερος τρόπος για να εμφανίζονται ή να αποκρύπτονται στοιχεία με χάρη. Χρησιμοποιήστε [[LFT:6]] για να ζωντανέψει το [[[LFT:7]] από 0 σε 1 (ή αντίστροφα). Για Ανανεωμένο, χρησιμοποιήστε [[[LFT:8]]] και ένα κινούμενο στυλ. Οι φιγούρες είναι εξαιρετικές για τις μοντάλ επικαλύψεις, τις εργαλειοθήκες, ή τη φόρτωση εικόνας.

2. Μετάβαση σε σλάιντ

Μεταφράστε ένα συστατικό οριζόντια ή κάθετα για να δημιουργήσετε κίνηση. Συρόμενη ένα στοιχείο από την άκρη αισθάνεται φυσικό ⁇ σκέψου ένα μενού συρτάρι ή ένα banner ειδοποίησης. Συνδυάστε μετάφραση με λειτουργίες χαλάρωσης όπως [[LFT:9]] για να μιμηθείτε φυσική κίνηση. Για καλύτερη απόδοση, χρησιμοποιήστε την [[LFT:10]] ιδιότητα και το σύνολο [[LFT:11]] (εργάζεται τόσο κινούμενη όσο και ανανεωμένη).

3. Κλίμακα και αναπήδηση

Ένα ανοιξιάτικο animation δίνει ένα φως “bounce” που αισθάνεται οργανική. Σε Αναζωογονηθεί, σας επιτρέπει να ρυθμίσετε την ακαμψία, απόσβεση, και μάζα για τον έλεγχο της αναπήδησης. Bounce εφέ λειτουργούν καλά για όπως κουμπιά, την επιλογή καρτών, ή τον εορτασμό confetti.

4. Περιστροφή

Περιστροφή ενός εικονιδίου ή εικόνας για να υποδείξετε πρόοδο ή αλλαγή κατάστασης. Ένας περιστρεφόμενος φορτωτής είναι ένα κλασικό παράδειγμα, αλλά η περιστροφή μπορεί επίσης να χρησιμοποιηθεί για flip κάρτες, επέκταση βέλη, ή παιχνιδιάρικες κινήσεις φόρτωσης. Χρησιμοποιήστε [[LFT:13]] για να χαρτογραφήσετε μια κινούμενη τιμή σε μια περιοχή περιστροφής (0-360 μοίρες).

5. Μορφωτικά σχήματα (Interpolation)

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

Προηγμένα πρότυπα για επαγγελματικές εφαρμογές

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

Αλυσίδα και αλληλουχία

Εκτέλεση κινουμένων σχεδίων το ένα μετά το άλλο χρησιμοποιώντας (Animated API) ή με φωλιάσμα ] και (Αναζωογονημένο). Αυτό το μοτίβο είναι ιδανικό για εποχούμενες ροές, βήμα-βήμα εισαγωγές, ή κλιμακωτές καταχωρήσεις λίστας.

Παράλληλοι κινούμενοι άξονες

Κινούμενες πολλαπλές ιδιότητες με τη μία ⁇ ωραιότητα, κλίμακα, και μετάφραση ⁇ χρησιμοποιώντας [[LFT:18]] ή [[LFT:19]] σε ένα ενιαίο κινούμενο στυλ. Αυτό δημιουργεί σύνθετη, συντονισμένη κίνηση όπως μια κάρτα που επεκτείνεται ενώ ξεθωριάζει.

Gesture ⁇ Driven Animations (στα Αγγλικά)

Ενσωματώστε το react-native-gesture-handler με Reanimated για να χειριστεί swips, τηγάνια και τσιμπήματα. Για παράδειγμα, μια χειρονομία swip ⁇ to ⁇ delete που μεταφράζει μια σειρά και αποκαλύπτει ένα κουμπί διαγραφής. τρέχει εξ ολοκλήρου στο νήμα UI, εξασφαλίζοντας 60 fps απόκριση.

Κινήσεις διάταξης

React Native’s LayoutAnimation[ Το API ενεργοποιεί αυτόματα αλλαγές στη διάταξη ενός συστατικού (προσθήκη, αφαίρεση, αλλαγή μεγέθους). Ενώ περιορίζεται στην προσαρμογή, είναι ένας τρόπος μηδενικής ⁇ προσπάθειας για να προσθέσετε βερνίκι. Για περισσότερο έλεγχο, χρησιμοποιήστε το Reanimated’s [[LFT:21]] σε συνδυασμό με για να ενεργοποιήσετε τις αλλαγές διάταξης χειροκίνητα.

Μεταβίες κοινόχρηστου στοιχείου

Η μετάβαση ενός κοινού στοιχείου ομαλά μεταξύ των οθονών (π.χ., μια μικρογραφία που επεκτείνεται σε μια εικόνα πλήρους οθόνης). Βιβλιοθήκες όπως [[[LFT:0]]αντιδρούν-ενεργό-μερισμένο-στοιχείο[[LFT:1]]] ή [[LFT:2]] αναπαράγουν-ενημερώνουν-ενσωματώνουν αυτή την πολύπλοκη λογική. Βασίζονται στη μέτρηση των θέσεων εκκίνησης και λήξης και στην απεικόνιση ενός αντιγράφου του στοιχείου.

Βιβλιοθήκες Κινουμένων Σχεδίων

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

  • Lottie ⁇ Αποτύπωση σύνθετων διανυσματικών κινουμένων σχεδίων που εξάγονται από τα αρχεία After Effects. Ιδανική για περίπλοκα, προσχεδιασμένα κινούμενα σχέδια όπως η φόρτωση spinners, εικονογραφήσεις, ή μικρο-συνδράσεις. Η βιβλιοθήκη ενσωματώνει απρόσκοπτα.
  • Μότι ⁇ Χτισμένο στην κορυφή του Ανανεωμένου, το Moti παρέχει ένα δηλωτικό API για κοινά μοτίβα κινουμένων σχεδίων (προσομοίωση, διαφάνεια, κλίμακα, κ.λπ.) με ελάχιστη λεβήτα. Είναι εξαιρετικό για ταχεία πρωτοτυποποίηση και μικρο-ανωμαλίες UI.
  • Κινούμενο (React Native)[[LFT:1]] ⁇ Ακόμα χρήσιμο για ελαφρά εφέ όπου το Reanimated είναι υπερβολή. Για παράδειγμα, απλές κεφαλίδες parallax ή περιστρεφόμενες spinners.

Συμβουλές βελτιστοποίησης απόδοσης

Οι κακές animations καταστρέφουν την εμπειρία του χρήστη. Ακολουθήστε αυτές τις οδηγίες για να κρατήσετε την εφαρμογή σας ομαλή:

  • Χρησιμοποιήστε τον τοπικό οδηγό ⁇ Για το κινούμενο API, που στο ή για να εκτελέσετε το animation στο νήμα του ιθαγενούς. Δεν το υποστηρίζουν όλες οι κινούμενες ιδιότητες (ωσότητα, μετασχηματισμός, χρώματα, ιδιότητες διάταξης δεν το κάνουν).
  • Προτιμήστε το Αναζωογόνημα για βαριά κινούμενα σχέδια[[LFT:1]] ⁇ Αναζωογονημένο τρέχει εξ ολοκλήρου στο νήμα UI, έτσι ώστε να αποφεύγει το μπλοκάρισμα νημάτων JavaScript. Πάντα χρήση Αναζωογονημένο για χειρονομίες ⁇ με γνώμονα ή συνεχή κινούμενα σχέδια.
  • Αποφύγετε την αναδημιουργία κινουμένων σχεδίων σε κάθε απόδοση[[LFT:1]] ⁇ Απομνημόνευση κινουμένων σχεδίων και στυλ χρησιμοποιώντας [[LFT:27]] (Animated) ή [[LFT:28]] (Αναζωογόνηση).
  • Μέτρο FPS ⁇ Χρήση της οθόνης FPS React Native (συσκευή shake, ενεργοποίηση perf monitor) ή μιας βιβλιοθήκης όπως αντιδραστική απόδοση [[LFT:3]] για να εντοπίσει το jank.
  • Μειώστε το thrash διάταξης ⁇ Αποφύγετε τις κινούμενες ιδιότητες που προκαλούν επαναυπολογισμό διάταξης (π.χ., ], ], ]) χωρίς επιτάχυνση υλικού. Προτιμήστε σε σχέση με τις μεταβαλλόμενες διαστάσεις.

Πραγματικές υποθέσεις χρήσης World

Για να δείτε αυτές τις τεχνικές σε δράση, ελέγξτε εφαρμογές όπως Twitter (pull ⁇ to ⁇ refresh break break, heart animation), Airbnb[] (μεταβάσεις smooth μεταξύ των στοιχείων του δρομολογίου), και Headspace (διαμεσολάβηση συνεδρίας προόδου κύκλους με περιστροφή και κλιμάκωση). Το μοτίβο είναι πάντα το ίδιο: λεπτή, σκόπιμη κίνηση που αισθάνεται φυσική, ποτέ δεν αποσπά.

Ξεκινώντας με ένα Απλό Παράδειγμα

Αν είστε νέοι στις κινούμενες εικόνες, ξεκινήστε με ένα βασικό κουμπί πατήστε το σχόλιο.

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
// ... inside component
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
 transform: [{ scale: scale.value }]
}));
// on touch start
scale.value = withSpring(0.95);
// on touch end
scale.value = withSpring(1);
// Apply animatedStyle to a component

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

Συμπέρασμα

Η εκμάθηση τεχνικών animation στην React Native είναι μια επένδυση που αποδίδει σε δέσμευση χρήστη και τις αξιολογήσεις καταστημάτων εφαρμογών. Ξεκινήστε με το Animated API για απλές περιπτώσεις, αλλά αποφοιτήστε για να Αναζωογονηθεί καθώς οι ανάγκες σας μεγαλώνουν. Συνδυάστε τεχνικές όπως ξεθώριασμα, διαφάνεια, και κλίμακα για να δημιουργήσετε πλούσιες αλληλεπιδράσεις. Χρησιμοποιήστε βιβλιοθήκες όπως η Lottie και Moti για να επιταχύνετε την ανάπτυξη. Και πάντα, προτεραιότητα απόδοσης ⁇ smooth animations είναι το χαρακτηριστικό γνώρισμα μιας επαγγελματικής εφαρμογής. Πείραμα, δοκιμή σε πραγματικές συσκευές, και αφήστε τη δημιουργικότητά σας λάμψη.

Για περαιτέρω ανάγνωση, συμβουλευτείτε τον επίσημο React Native Animation τεκμηρίων, τον Reanimated docs] και τον Λοττιγια React Native resource]. Αυτά θα σας δώσουν την πλήρη εικόνα από τη θεωρία μέχρι την προηγμένη υλοποίηση.