Timing, ελατήρια και σύνθεση

timing, spring και decay

Το timing ακολουθεί μια καμπύλη σε σταθερό duration. Το spring ακολουθεί τη φυσική και δεν έχει σταθερή διάρκεια. Το decay ξεκινά με μια ταχύτητα και επιβραδύνει.

Οι ίδιοι drivers δέχονται αριθμό, ValueXY ή εγγραφή, οπότε τα { x, y, opacity } μπορούν να κινούνται μαζί.

Παράμετροι ελατηρίου

Χρησιμοποιήστε ένα σύνολο παραμέτρων. Χωρίς αυτό παίρνετε το προεπιλεγμένο ελατήριο του React Native (tension 40, friction 7). Η velocity ενός ελατηρίου είναι από προεπιλογή η ταχύτητα της κίνησης που διακόπτει.

spring(value, { toValue: 1 }); // React Native default
spring(value, { toValue: 1, stiffness: 260, damping: 20 }); // physical
spring(value, { toValue: 1, bounciness: 8, speed: 12 }); // React Native style
spring(value, { toValue: 1, tension: 40, friction: 7 }); // origami style

Σύνθεση

Το sequence εκτελεί το ένα μετά το άλλο, το parallel μαζί, το stagger ξεκινά το καθένα μετά από καθυστέρηση, το delay περιμένει και το loop επαναλαμβάνει. Το αποτέλεσμα είναι πάλι ελεγκτής, οπότε οι συνθέσεις μπορούν να εμφωλεύονται.

start, stop και reset

Κάθε ελεγκτής έχει start(callback?), stop() και reset(). Το callback λαμβάνει { finished }: false όταν η κίνηση σταμάτησε ή αντικαταστάθηκε.

Η εκκίνηση νέου driver στην ίδια τιμή αντικαθιστά αυτόν που τρέχει από την τρέχουσα θέση. Κανένα άλμα σε οποιοδήποτε άκρο.

const move = timing(value, { toValue: 1, duration: 600 });

move.start(({ finished }) => {
  // finished is false when stopped or replaced by a new animation
});
move.stop(); // keeps the value where it is on screen
move.reset(); // returns to where this animation started

Ακολουθώντας μια άλλη τιμή

Ένα ζωντανό toValue ξαναξεκινά τον driver κάθε φορά που αλλάζει εκείνη η τιμή, όπως το tracking στο React Native. Το follow(target, source) είναι η ίδια σύνδεση με ελατήριο ως ονομασμένη συνάρτηση.

// A live toValue tracks another value, like React Native tracking.
spring(badge, { toValue: pointer, stiffness: 300, damping: 26 }).start();

// follow() is the same connection as a named function.
follow(badge, pointer, { stiffness: 300, damping: 26 });

Easing και keyframes

Το Easing αντιστοιχεί στο React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier και οι βοηθοί in, out, inOut. Το keyframes(value, frames, options) περνά μια τιμή από αρκετούς αριθμούς, με προαιρετικά times και repeat.