Vadovai · 08

Našumas ir grojimas

Kaip Animated išvengia darbo kiekviename kadre, kaip patikrinti, kokį kelią naudoja elementas, ir kaip buvo išmatuoti pagrindinio puslapio skaičiai.

Trys grojimo keliai

Animated kelią pasirenka kiekvienai savybei. API nesikeičia priklausomai nuo kelio.

Kelias	Kada	Darbas per kadrą
browser	Baigtinis transform ir opacity judesys `Animated.<tag>` elementuose, įskaitant spyruokles	Jokio puslapio JavaScript kode
css	Tikslios kreivės, kurias naršyklė gali išreikšti bendrais CSS raktiniais kadrais	Jokio puslapio JavaScript kode
js	Paprasto stiliaus kintamieji, įvestis, savi skaičiavimai ir sekų ribos	Vienas įrašymas per reikšmę, be React perpiešimo

Viena reikšmė, daug elementų

hook reikšmės išvestinės yra calc() išraiškos. Su scope vienas kintamojo įrašymas per kadrą valdo kiekvieną konteinerio elementą.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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;
}

Patikrinkite kelią

inspect(element) tikro vykdymo metu grąžina kiekvienos animuojamos savybės driver ir atsarginio kelio priežastį.

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

Prasideda nuo pirmojo kadro

Kai judesį paleidžianti užduotis užima pagrindinę giją, pavyzdžiui, hidratacija ar didelis commit, judesys paleidžiamas iš naujo, kai tas darbas baigiasi, užuot atrodęs jau pažengęs. Paslėptame puslapyje paleistas judesys baigiamas fone.

Kaip buvo išmatuoti pagrindinio puslapio skaičiai

Kiekvienas scenarijus buvo vykdomas naujame puslapyje po vieno apšilimo, su trimis užfiksuotais pavyzdžiais, pateikiant medianą. JavaScript laikas yra laikas, praleistas animation-frame callback, kol vyksta judesys. Į jį neįeina stilius, išdėstymas ir piešimas, kuriuos naršyklė atlieka kiekvienu atveju, todėl tai nėra viso CPU ar kadrų dažnio matas.

Naršyklės grojimas nepadaro išdėstymo, piešimo, komponavimo ar atminties nemokamų. Matuokite tikrą ekraną įrenginiuose, kuriuos palaikote.

Scenarijus	Sąranka	Rezultatas
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