Οδηγοί · 08

Απόδοση και αναπαραγωγή

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

Τρεις διαδρομές αναπαραγωγής

Το Animated επιλέγει διαδρομή ανά ιδιότητα. Το API δεν αλλάζει ανάλογα με τη διαδρομή.

Διαδρομή	Πότε	Δουλειά ανά καρέ
browser	Πεπερασμένη κίνηση transform και opacity σε στοιχεία `Animated.<tag>`, μαζί με ελατήρια	Καμία στη JavaScript της σελίδας
css	Ακριβείς καμπύλες που το πρόγραμμα περιήγησης μπορεί να εκφράσει με κοινά keyframes CSS	Καμία στη JavaScript της σελίδας
js	Μεταβλητές απλού στυλ, είσοδος, δικός σας υπολογισμός και όρια sequence	Μία εγγραφή ανά τιμή, χωρίς απόδοση React

Μία τιμή, πολλά στοιχεία

Τα παράγωγα μιας τιμής hook είναι εκφράσεις calc(). Με scope, μία εγγραφή μεταβλητής ανά καρέ οδηγεί κάθε στοιχείο του κοντέινερ.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

Ελέγξτε τη διαδρομή

Το inspect(element) επιστρέφει τον driver και τον λόγο εναλλακτικής διαδρομής για κάθε κινούμενη ιδιότητα κατά τη διάρκεια μιας πραγματικής εκτέλεσης.

debug.js

import { inspect } from '@kkwaenggwari/animated';

console.table(inspect(element));
// property   driver     reason
// transform  browser    null
// opacity    css        null
// --level    js         css-variable-requires-js

Ξεκινά από το πρώτο καρέ

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

Πώς μετρήθηκαν οι αριθμοί της αρχικής σελίδας

Κάθε σενάριο έτρεξε σε νέα σελίδα μετά από μία προθέρμανση, με τρία καταγεγραμμένα δείγματα, και αναφέρεται η διάμεσος. Ο χρόνος JavaScript είναι ο χρόνος μέσα σε callbacks animation-frame όσο τρέχει η κίνηση. Δεν περιλαμβάνει στυλ, διάταξη και σχεδίαση, που το πρόγραμμα περιήγησης κάνει σε κάθε προσέγγιση, οπότε δεν είναι μέτρο του συνολικού CPU ή του ρυθμού καρέ.

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

Σενάριο	Ρύθμιση	Αποτέλεσμα
400 Animated.div elements move translateX and fade in (timing, 1800 ms)	seed/pose/tempo on Animated.div; 800 browser animations	0.00 ms
One useAnimated value drives 10,000 elements in ordinary style (loop, 1200 ms)	transform and opacity as calc() of one CSS variable written on a scope element	0.13 ms

2026-09-28 · Chrome 153.0.8010.52 (headless) · Windows_NT x64 · Intel(R) Core(TM) i7-14700K