Τιμές και στυλ

Κατοχή μιας τιμής

Το useAnimatedValue(initial) δημιουργεί ένα Value που ανήκει στο component. Χρησιμοποιήστε έναν αριθμό ή μια εγγραφή όπως { x: 0, opacity: 1 }, της οποίας τα πεδία είναι ξεχωριστές τιμές.

Σε απλό style, η τιμή ενός hook είναι το token var(--kkwa-…, initial). Οι ενημερώσεις γράφουν αυτή τη μεταβλητή στα στοιχεία που τη χρησιμοποιούν· το React δεν αποδίδει.

Παραγωγή με calc()

Η παρεμβολή χωρίς easing και τα add, subtract, multiply ή divide με σταθερά γίνονται ακριβείς εκφράσεις calc() της ίδιας μεταβλητής. Τις υπολογίζει το πρόγραμμα περιήγησης· δεν εκτελείται JavaScript γι' αυτές σε κανένα καρέ.

const progress = useAnimatedValue(0);

// A linear interpolation of a hook value is a calc() of the same CSS variable.
const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '180px'] });
const half = multiply(progress, 0.5);

<div style={{ opacity: half, transform: `translateX(${x})` }} />;

Χρώματα και δικοί σας υπολογισμοί

Τα χρώματα, οι παρεμβολές με easing, τα modulo, diffClamp και AnimatedComputed δεν γράφονται ως calc(). Το useAnimatedCSS(node) τους δίνει τη δική τους μεταβλητή CSS που ενημερώνεται από JavaScript, με την ίδια διάρκεια ζωής με το component.

Η απευθείας χρήση τέτοιου κόμβου στο style πετά σφάλμα, οπότε το κόστος δεν είναι ποτέ κρυφό.

const progress = useAnimatedValue(0);

// Colors and eased curves are not calc() expressions: give them their own CSS value.
const color = useAnimatedCSS(
  progress.interpolate({ inputRange: [0, 1], outputRange: ['#3d3bf3', '#22b8f0'] }),
);

<div style={{ background: color }} />;

Αφήστε το hook να κατέχει τη συνταγή

Το useAnimated(initial, factory, deps) κατέχει την τιμή και κάθε ελεγκτή που δηλώνεται σύγχρονα στο factory. Ξεκινά κατά την προσάρτηση, ξαναξεκινά όταν αλλάζει μια εξάρτηση και σταματά κατά την αποπροσάρτηση.

Για αναπαραγωγή που οδηγείται από συμβάντα, περάστε { autoStart: false } και μετά καλέστε start(), stop() ή reset() στην τιμή που επιστρέφεται.

const intro = useAnimated(
  { opacity: 0, y: 24 },
  (value) => {
    parallel([
      timing(value.opacity, { toValue: 1, duration: 400 }),
      spring(value.y, { toValue: 0, stiffness: 220, damping: 20 }),
    ]);
  },
  [],
);

<section style={{ opacity: intro.opacity, transform: `translateY(calc(${intro.y} * 1px))` }} />;

Μία εγγραφή για πολλά στοιχεία

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

Το AnimatedProvider scope={ref} ορίζει το προεπιλεγμένο scope για όλες τις τιμές hooks κάτω από αυτό.

const field = useRef(null);

// Written once on the field; every child that uses the value inherits it.
const wave = useAnimatedValue(0, { scope: field });

<div ref={field}>
  {items.map((item) => (
    <i key={item} style={{ transform: `rotate(calc(${wave} * 1turn))` }} />
  ))}
</div>;

Ανάγνωση τιμών σε JavaScript

Το getValue() επιστρέφει ένα στιγμιότυπο χωρίς συνδρομή React. Το useAnimatedListener(node, fn) σας καλεί σε κάθε αλλαγή και αφαιρεί τον listener κατά την αποπροσάρτηση. Χρησιμοποιήστε το για σχεδίαση σε canvas ή ανάλυση, όχι για απόδοση.