Περίπου 5 λεπτά · React 16.8+ · React DOM

Πρώτα βήματα

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

1
Εγκατάσταση
Το Animated δεν έχει εξαρτήσεις χρόνου εκτέλεσης. Το React 16.8+ είναι peer εξάρτηση.
Το σημείο εισόδου του πακέτου φέρει την ένδειξη 'use client'. Στο Next.js App Router, ένα layout διακομιστή μπορεί να αποδώσει το AnimatedProvider· χρησιμοποιήστε τα hooks και τα Animated.<tag> μέσα σε Client Components.
$
```
npm install @kkwaenggwari/animated
```
Το import @kkwaenggwari/animated επιλύεται στον επεξεργαστή σας.
Κινήστε μια πρώτη τιμή
Το useAnimatedValue(1) κατέχει έναν ζωντανό αριθμό για όλη τη διάρκεια ζωής του component. Βάλτε το κατευθείαν στο style: γίνεται μεταβλητή CSS, οπότε το React δεν αποδίδει όσο αλλάζει.
Το timing(value, { toValue, duration }).start() το κινεί. Ένα νέο πάτημα στη μέση ξεκινά από την τρέχουσα αδιαφάνεια.
Προετοιμασία παραδείγματος…
Το πλαίσιο σβήνει και επιστρέφει, και ένα δεύτερο πάτημα στη μέση αντιστρέφει την κατεύθυνση από εκεί που βρίσκεται.
Πολλές έξοδοι από μία τιμή
Το interpolate αντιστοιχίζει την τιμή σε μήκη, γωνίες ή αριθμούς. Χωρίς easing γίνεται ακριβές calc() της ίδιας μεταβλητής, οπότε πέντε λωρίδες κοστίζουν όσο μία.
Διαφορετικά εύρη εισόδου της ίδιας τιμής δημιουργούν κλιμάκωση χωρίς πέντε ξεχωριστές κινήσεις.
Προετοιμασία παραδείγματος…
Ένα πάτημα κινεί πέντε λωρίδες κλιμακωτά· η αλλαγή της διασποράς αλλάζει μόνο τα εύρη.
Περιγράψτε τον προορισμό
Το Animated.button αποδίδει ένα απλό κουμπί. Το seed είναι το πρώτο καρέ, το pose είναι πού πρέπει να βρίσκεται τώρα και το tempo είναι πώς φτάνει εκεί.
Όταν το pose αλλάζει στη μέση, το στοιχείο στρίβει από εκεί που είναι στην οθόνη και, με ελατήριο, κρατά την ταχύτητά του.
Προετοιμασία παραδείγματος…
Τα γρήγορα κλικ σε καρτέλες δεν κάνουν ποτέ καμία να πηδήξει.
Συνδέστε την είσοδο
Το input(ref, moveInput(...)) γράφει τις συντεταγμένες του δείκτη σε τιμές. Το follow(target, source) κάνει μια τιμή να ακολουθεί μια άλλη με ελατήριο.
Ό,τι δηλώνεται στο factory του useAnimated ανήκει στο component: οι listeners και τα ελατήρια σταματούν κατά την αποπροσάρτηση ή όταν αλλάζει μια εξάρτηση.
Προετοιμασία παραδείγματος…
Η κάρτα γέρνει προς τον δείκτη και ηρεμεί όταν ο δείκτης φύγει.
Κινήστε την αποχώρηση
Η αφαίρεση ενός παιδιού React συνήθως το διαγράφει αμέσως. Το Animated.Keep κρατά τα παιδιά με key μέχρι να ολοκληρωθεί το pose depart τους.
Το wait αποδίδει τα νέα παιδιά μόνο όταν ολοκληρωθούν όλες οι αποχωρήσεις.
Προετοιμασία παραδείγματος…
Τα μηνύματα που απορρίπτονται φεύγουν με την επιλεγμένη κίνηση πριν εξαφανιστούν.

Έχετε ολόκληρο το μοντέλο

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

Εγκατάσταση

Κινήστε μια πρώτη τιμή

Πολλές έξοδοι από μία τιμή

Περιγράψτε τον προορισμό

Συνδέστε την είσοδο

Κινήστε την αποχώρηση

Έχετε ολόκληρο το μοντέλο