الأدلة · 08

الأداء والتشغيل

كيف يتجنّب Animated العمل في كل إطار، وكيف تتحقق من المسار الذي يستخدمه عنصر، وكيف قيست أرقام الصفحة الرئيسية.

ثلاثة مسارات للتشغيل

يختار Animated مسارًا لكل خاصية. ولا تتغيّر API بتغيّر المسار.

المسار	متى	العمل لكل إطار
browser	الحركة المحدودة لـ transform وopacity على عناصر `Animated.<tag>`، بما فيها النوابض	لا شيء في JavaScript الصفحة
css	منحنيات دقيقة يستطيع المتصفح التعبير عنها بإطارات CSS مفتاحية مشتركة	لا شيء في JavaScript الصفحة
js	متغيّرات style العادية، والإدخال، والحسابات المخصّصة، وحدود التسلسلات	كتابة واحدة لكل قيمة، من دون عرض React

قيمة واحدة، عناصر كثيرة

مشتقات قيمة الخطّاف تعبيرات 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) المشغّل وسبب fallback لكل خاصية متحركة أثناء تشغيل حقيقي.

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

يبدأ من الإطار الأول

حين تشغل المهمة التي تبدأ الحركة الخيط الرئيسي، كالإماهة أو اعتماد كبير، تُعاد الحركة من البداية بعد انتهاء ذلك العمل بدل أن تظهر متقدمة. والبدء على صفحة مخفية ينتهي في الخلفية.

كيف قيست أرقام الصفحة الرئيسية

شُغّل كل سيناريو في صفحة جديدة بعد إحماء واحد، مع ثلاث عيّنات مسجّلة، ويُذكر الوسيط. زمن JavaScript هو الوقت المستغرق داخل استدعاءات animation frame أثناء الحركة. ولا يشمل style وlayout وpaint التي يؤديها المتصفح مع أي نهج، فهو ليس مقياسًا لإجمالي CPU أو معدّل الإطارات.

التشغيل في المتصفح لا يجعل layout وpaint وcompositing والذاكرة مجانية. قِس الشاشة الحقيقية على الأجهزة التي تدعمها.

السيناريو	الإعداد	النتيجة
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