Χρήση της μεθόδου Animated.spring() για δυναμικές κινούμενες εικόνες στο React Native

Η βιβλιοθήκη Animated API του React Native μπορεί να σας βοηθήσει να δημιουργήσετε δυναμικά, ρευστά κινούμενα σχέδια με λίγη προσπάθεια.

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

Τι είναι τα δυναμικά κινούμενα σχέδια;

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

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

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

Έλεγχος του Animation

Όταν χρησιμοποιείτε το Animated.spring() μέθοδο, θα χρειαστεί να έχετε τον έλεγχο του κινούμενου σχεδίου για να βεβαιωθείτε ότι συμπεριφέρεται όπως θέλετε. Το Animated παρέχει ένα σύνολο μεθόδων για τον μη αυτόματο έλεγχο και χειρισμό των κινούμενων εικόνων React Native.

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

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

συνθ stopAnimation = () => {
 position.stop(αξία => {
 position.setValue(0);
 });
};

Σημειώστε πώς μπορείτε να χρησιμοποιήσετε το setValue() μέθοδος επαναφοράς της τιμής θέσης στην αρχική της κατάσταση 0.

Μια άλλη μέθοδος που έχετε στη διάθεσή σας είναι επαναφορά(), το οποίο επαναφέρει το κινούμενο σχέδιο στην αρχική του κατάσταση. Αυτή η μέθοδος είναι χρήσιμη όταν χρειάζεται να επανεκκινήσετε ένα κινούμενο σχέδιο.

Εφαρμογές πραγματικού κόσμου

Μπορείτε να εξερευνήσετε μια πρακτική χρήση του Animated.spring() μέθοδος με την κατασκευή ενός απλού animation. Μια στρογγυλή μπάλα θα πέσει σε μια επιφάνεια όταν ένας χρήστης αλληλεπιδράσει μαζί της και μετά θα αναπηδήσει ξανά στον αέρα. Θα πρέπει να έχετε ήδη ένα έργο react Native με το οποίο μπορείτε να εργαστείτε.

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

εισαγωγή React, { useState } από'αντιδρώ';
εισαγωγή { Κινούμενα σχέδια } από'react-native';
συνθ Εφαρμογή = () => {
συνθ [θέση, setPosition] = useState(νέος Κινούμενα σχέδια. Αξία(0));

ΕΠΙΣΤΡΟΦΗ (
μεταμορφώνω: [{ μεταφράστεΥ: θέση }] }}>
 {/* Εξάρτημα μπάλας εδώ */}
 </Animated.View>
 );
};

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

Στη συνέχεια, δημιουργήστε τη λειτουργία κίνησης που θα κάνει την μπάλα να πέσει και να αναπηδήσει προς τα πάνω:

συνθ startAnimation = () => {
 Animated.spring (θέση, {
 toValue: 300,
 τριβή: 1,
 ένταση: 10,
 useNativeDriver: αληθής,
 }).αρχή(() => {
 Animated.spring (θέση, {
 toValue: 0,
 τριβή: 1,
 ένταση: 10,
 useNativeDriver: αληθής,
 }).αρχή();
 });
};

Χρήση Animated.spring() για να δημιουργήσετε ένα κινούμενο σχέδιο που θα μετακινεί την μπάλα από την αρχική της θέση 0 στην τελική θέση 300. Προσδιορίζω τριβή και ένταση τιμές για τον έλεγχο του εφέ αναπήδησης της μπάλας κατά τη ρύθμιση useNativeDriver προς την αληθής για τη βελτίωση της απόδοσης.

Στη συνέχεια, μπορείτε να εφαρμόσετε τον κώδικα για την ενεργοποίηση της κίνησης όταν ένας χρήστης αλληλεπιδρά με την μπάλα:

ΕΠΙΣΤΡΟΦΗ (

μεταμορφώνω: [{ μεταφράστεΥ: θέση }] }}>
 {/* Εξάρτημα μπάλας εδώ */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Αυτός ο κώδικας αναδιπλώνει το Κινούμενα σχέδια. Θέα συστατικό σε TouchableWithoutFeedback έτσι ώστε το animation να ενεργοποιείται όταν ο χρήστης πιέζει την μπάλα. Μπορείτε επίσης να ενεργοποιήσετε την κίνηση κατά την προσάρτηση του στοιχείου καλώντας το startAnimation() λειτουργία μέσα στο React's useEffect() άγκιστρο.

Με αυτόν τον κώδικα, θα πρέπει να δημιουργήσετε ένα κινούμενο σχέδιο με μπάλα που πέφτει Animated.spring().

Δυναμικά κινούμενα σχέδια στο React Native

Έχετε δει πώς μπορείτε να εφαρμόσετε ένα κινούμενο σχέδιο με μπάλα που πέφτει χρησιμοποιώντας το Animated.spring(), αλλά υπάρχουν πολλοί άλλοι τρόποι με τους οποίους μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε δυναμικά κινούμενα σχέδια.

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

Συνδυάζοντας το Animated.spring() με άλλες λειτουργίες κινούμενων εικόνων, όπως το Animated.timing() ή το Animated.sequence(), μπορείτε να δημιουργήσετε πολύπλοκα και απρόσκοπτα κινούμενα σχέδια που βελτιώνουν την εμπειρία του χρήστη.