Kılavuzlar · 08

Performans ve oynatma

Animated'ın her karedeki işten nasıl kaçındığı, bir öğenin hangi yolu kullandığını nasıl kontrol edeceğiniz ve ana sayfadaki sayıların nasıl ölçüldüğü.

Üç oynatma yolu

Animated her özellik için bir yol seçer. API yola göre değişmez.

Yol	Ne zaman	Kare başına iş
browser	`Animated.<tag>` öğelerinde yaylar dahil sonlu transform ve opacity hareketi	Sayfanın JavaScript'inde yok
css	Tarayıcının paylaşılan CSS anahtar kareleriyle ifade edebildiği kesin eğriler	Sayfanın JavaScript'inde yok
js	Sıradan stil değişkenleri, girdi, özel hesaplama ve dizi sınırları	Değer başına tek yazma, React render'ı yok

Tek değer, birçok öğe

Bir hook değerinin türevleri calc() ifadeleridir. scope ile kare başına tek değişken yazımı kapsayıcıdaki tüm öğeleri yönetir.

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

Yolu kontrol edin

inspect(element) gerçek bir çalıştırma sırasında her animasyonlu özelliğin driver'ını ve yedek yol nedenini döndürür.

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

İlk kareden başlar

Hareketi başlatan görev ana iş parçacığını meşgul ettiğinde, örneğin hidrasyon ya da büyük bir commit, hareket önceden ilerlemiş görünmek yerine o iş bitince yeniden başlar. Gizli bir sayfada başlayan hareket arka planda tamamlanır.

Ana sayfadaki sayılar nasıl ölçüldü

Her senaryo bir ısınmadan sonra yeni bir sayfada, kaydedilen üç örnekle çalıştı ve ortanca bildirildi. JavaScript süresi, hareket sürerken animation-frame callback'leri içinde geçen süredir. Tarayıcının her yaklaşımda yaptığı stil, düzen ve boyamayı içermez; bu yüzden toplam CPU ya da kare hızı ölçüsü değildir.

Tarayıcı oynatması düzeni, boyamayı, birleştirmeyi ya da belleği bedava yapmaz. Desteklediğiniz cihazlarda gerçek ekranı ölçün.

Senaryo	Kurulum	Sonuç
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