Value
new Value(initial: number)Ένας μεταβλητός αριθμός με setValue, setOffset, flattenOffset, extractOffset, stopAnimation και resetAnimation.
Αναφορά API
Κάθε export του @kkwaenggwari/animated, με την υπογραφή του και τον οδηγό που το εξηγεί.
Τιμές και γράφοι
ValueXY
new ValueXY({ x?, y? })Ζεύγος τιμών x και y με τις ίδιες λειτουργίες, μαζί με getLayout και getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Δημιουργεί αριθμό ή ονομασμένη αριθμητική εγγραφή εκτός React. Η δημιουργία δεν ξεκινά τίποτα.
Οδηγός: Τιμές και στυλAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Η βάση μόνο για ανάγνωση κάθε τιμής και γράφου: getValue, interpolate και listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Ζωντανή αντιστοίχιση από εύρη εισόδου σε εύρη εξόδου, με easing και παρέκταση extend, clamp ή identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Καθαρός υπολογισμός μόνο για ανάγνωση πάνω σε μία ή περισσότερες εισόδους. Οι έξοδοι που τον χρησιμοποιούν τρέχουν σε JavaScript.
Οδηγός: Τιμές και στυλinterpolateFn
interpolateFn({ value, inputRange, outputRange });Υπολογίζει μια παρεμβολή μία φορά για έναν απλό αριθμό.
Οδηγός: Τιμές και στυλadd
add(...inputs);Το άθροισμα αριθμών και τιμών.
Οδηγός: Τιμές και στυλsubtract
subtract(a, b);Η διαφορά δύο εισόδων.
Οδηγός: Τιμές και στυλmultiply
multiply(...inputs);Το γινόμενο αριθμών και τιμών.
Οδηγός: Τιμές και στυλdivide
divide(a, b);Το πηλίκο δύο εισόδων.
Οδηγός: Τιμές και στυλmodulo
modulo(a, b);Μια τιμή που αναδιπλώνεται, για παράδειγμα για ατέρμονη περιστροφή.
Οδηγός: Τιμές και στυλdiffClamp
diffClamp(input, min, max);Ακολουθεί τις αλλαγές της εισόδου αλλά μένει μέσα σε ένα εύρος· χρήσιμο για κεφαλίδες που κρύβονται στην κύλιση.
Οδηγός: Τιμές και στυλHooks του React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Κατέχει αριθμό ή αριθμητική εγγραφή για τη διάρκεια ζωής του component. Στο style είναι μεταβλητή CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Κατέχει μια τιμή μαζί με κάθε ελεγκτή, είσοδο και έξοδο που δηλώνονται στο factory της. Ξεκινά, ξαναξεκινά όταν αλλάζουν οι εξαρτήσεις και καθαρίζει.
Οδηγός: Τιμές και στυλuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Κατέχει μια πλήρη δισδιάστατη τιμή.
Οδηγός: Τιμές και στυλuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringΔίνει σε έναν παράγωγο κόμβο που δεν είναι έκφραση calc() τη δική του μεταβλητή CSS, με τη διάρκεια ζωής του component.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Καλεί μια συνάρτηση σε κάθε αλλαγή ενός κόμβου ή ValueXY· αφαιρείται κατά την αποπροσάρτηση.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Επιστρέφει { mounted, animatedValue } για είσοδο και έξοδο με hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Ορίζει το προεπιλεγμένο scope μεταβλητών CSS για τις τιμές hooks κάτω από αυτό.
Οδηγός: Τιμές και στυλflushAnimatedUpdates
flushAnimatedUpdates();Εφαρμόζει σύγχρονα την εκκρεμή έξοδο, για ντετερμινιστικά τεστ.
Οδηγός: Τιμές και στυλDrivers, σύνθεση και χρονολόγια
timing
timing(value, { toValue, duration?, delay?, easing? })Κινεί μια τιμή σε καμπύλη easing για σταθερή διάρκεια.
Οδηγός: Timing, ελατήρια και σύνθεσηspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Κινεί μια τιμή με φυσική ελατηρίου, κρατώντας την ταχύτητα μιας διακοπείσας κίνησης.
Οδηγός: Timing, ελατήρια και σύνθεσηdecay
decay(value, { velocity, deceleration? })Ξεκινά με μια ταχύτητα και επιβραδύνει.
Οδηγός: Timing, ελατήρια και σύνθεσηdelay
delay(ms);Ένας ελεγκτής που μόνο περιμένει.
Οδηγός: Timing, ελατήρια και σύνθεσηsequence
sequence([a, b, c]);Εκτελεί ελεγκτές τον έναν μετά τον άλλο.
Οδηγός: Timing, ελατήρια και σύνθεσηparallel
parallel([a, b], { stopTogether? }?)Εκτελεί ελεγκτές μαζί.
Οδηγός: Timing, ελατήρια και σύνθεσηstagger
stagger(ms, [a, b, c]);Ξεκινά ελεγκτές τον έναν μετά τον άλλο με σταθερό διάστημα.
Οδηγός: Timing, ελατήρια και σύνθεσηloop
loop(animation, { iterations?, resetBeforeIteration? }?)Επαναλαμβάνει έναν ελεγκτή κάποιες φορές ή για πάντα.
Οδηγός: Timing, ελατήρια και σύνθεσηkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Περνά μια τιμή από αρκετούς αριθμούς, με προαιρετικούς χρόνους και επαναλήψεις.
Οδηγός: Timing, ελατήρια και σύνθεσηEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Καμπύλες που αντιστοιχούν στο React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier και βοηθοί in/out.
Οδηγός: Timing, ελατήρια και σύνθεσηcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Ρολόι με δυνατότητα μετάβασης και ονομασμένα κομμάτια, εκτός React.
Οδηγός: Timing, ελατήρια και σύνθεσηuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Χρονολόγιο που ανήκει στο component, με κομμάτια που λειτουργούν απευθείας σε απλό στυλ.
Οδηγός: Timing, ελατήρια και σύνθεσηComponents και διάταξη
Animated
<Animated.div seed pose tempo respond depart move />;Ο χώρος ονομάτων των hosts HTML και SVG όπως το Animated.div, μαζί με τις βασικές συναρτήσεις με ονόματα του React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Κάνει ένα component που προωθεί ref να δέχεται τα props των hosts Animated.
Οδηγός: Components AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Μοιράζεται όνομα pose, tempo και προεπιλογές κίνησης με τα στοιχεία Animated μέσα του.
Οδηγός: Components AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Κρατά τα παιδιά με key προσαρτημένα μέχρι να ολοκληρωθεί η αποχώρησή τους.
Οδηγός: Components AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Κινεί τις αλλαγές διάταξης των στοιχείων move και συνδέει στοιχεία με την ίδια ταυτότητα.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Ο ίδιος συντονισμός capture και commit διάταξης για άλλους renderers.
Οδηγός: Components AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Αναδιάταξη ελεγχόμενης λίστας κατά μήκος ενός άξονα με δείκτη και πληκτρολόγιο.
Οδηγός: Components AnimatedΕίσοδος και συνδέσεις
input
input(targetRef, adapter, onEvent?)Προσαρτά σε ένα στοιχείο προσαρμογέα εισόδου ως ελεγκτή που κατέχεται.
Οδηγός: Είσοδος και χειρονομίεςfollow
follow(target, source, { stiffness?, damping?, mass? }?)Κάνει μια τιμή να ακολουθεί μια άλλη με ελατήριο.
Οδηγός: Είσοδος και χειρονομίεςconnect
connect(node, (value) => write(value));Στέλνει κάθε αλλαγή ενός κόμβου σε μια συνάρτηση.
Οδηγός: Είσοδος και χειρονομίεςevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Αντιστοιχίζει εμφωλευμένα δεδομένα συμβάντων σε τιμές, όπως στο React Native.
Οδηγός: Είσοδος και χειρονομίεςdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Σύρση με δείκτη και πληκτρολόγιο με όρια, ελαστικά άκρα, ορμή και settle.
Οδηγός: Είσοδος και χειρονομίεςpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Κλίμακα και περιστροφή από χειρονομία δύο δεικτών.
Οδηγός: Είσοδος και χειρονομίεςmoveInput
moveInput({ x?, y?, relative?, reset? })Συντεταγμένες δείκτη, προαιρετικά σε σχέση με το κέντρο του στοιχείου.
Οδηγός: Είσοδος και χειρονομίεςscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Θέση και πρόοδος κύλισης ενός στοιχείου, της σελίδας ή ενός στοιχείου που διασχίζει το viewport.
Οδηγός: Είσοδος και χειρονομίεςwheelInput
wheelInput({ x?, y? })Μεταβολές του τροχού.
Οδηγός: Είσοδος και χειρονομίεςviewportInput
viewportInput({ root?, margin?, amount?, once? })Αν το στοιχείο βρίσκεται στο viewport.
Οδηγός: Είσοδος και χειρονομίεςmediaInput
mediaInput('(min-width: 768px)');Αν ταιριάζει ένα media query.
Οδηγός: Είσοδος και χειρονομίεςlongPressInput
longPressInput({ delay?, threshold? })Δείκτης που κρατιέται πατημένος μετά από καθυστέρηση και μέσα σε όριο κίνησης.
Οδηγός: Είσοδος και χειρονομίεςswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Κατεύθυνση, απόσταση και ταχύτητα σάρωσης.
Οδηγός: Είσοδος και χειρονομίεςΈξοδος και διάγνωση
bind
bind(element, style) → { update, inspect, dispose }Συνδέει στυλ Animated σε στοιχείο εκτός React· επιστρέφει update, inspect και dispose.
inspect
inspect(element) → [{ property, driver, reason }]Η διαδρομή αναπαραγωγής και ο λόγος εναλλακτικής διαδρομής κάθε κινούμενης ιδιότητας ενός στοιχείου.
Οδηγός: Απόδοση και αναπαραγωγήoutput
output(targetRef, { style?, attributes?, properties?, text? })Κατέχει έξοδο στυλ, χαρακτηριστικού, κειμένου ή ιδιότητας μέσα στο useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Προσαρτά αμέσως μια αντιστοίχιση εξόδου· επιστρέφει flush και dispose.