คู่มือ · 08

ประสิทธิภาพและการเล่น

Animated หลีกเลี่ยงงานในทุกเฟรมอย่างไร วิธีตรวจว่าองค์ประกอบใช้เส้นทางใด และตัวเลขบนหน้าแรกวัดอย่างไร

สามเส้นทางการเล่น

Animated เลือกเส้นทางตามพร็อพเพอร์ตี API ไม่เปลี่ยนตามเส้นทาง

เส้นทาง	เมื่อใด	งานต่อเฟรม
browser	การเคลื่อนไหว transform และ opacity ที่มีจุดสิ้นสุดบนองค์ประกอบ `Animated.<tag>` รวมถึงสปริง	ไม่มีใน JavaScript ของหน้า
css	เส้นโค้งแม่นยำที่เบราว์เซอร์แสดงได้ด้วยคีย์เฟรม 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 และเหตุผลของ 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

เริ่มตั้งแต่เฟรมแรก

เมื่องานที่เริ่มการเคลื่อนไหวทำให้เธรดหลักยุ่ง เช่น hydration หรือ commit ขนาดใหญ่ การเคลื่อนไหวจะเริ่มใหม่หลังงานนั้นจบ แทนที่จะดูเหมือนเดินไปแล้ว การเริ่มบนหน้าที่ซ่อนอยู่จะจบในเบื้องหลัง

ตัวเลขบนหน้าแรกวัดอย่างไร

แต่ละสถานการณ์รันในหน้าใหม่หลังการวอร์มอัปหนึ่งครั้ง บันทึกสามตัวอย่าง และรายงานค่ามัธยฐาน เวลา JavaScript คือเวลาที่ใช้ใน callback ของ animation-frame ขณะการเคลื่อนไหวทำงาน ไม่รวมสไตล์ เลย์เอาต์ และการวาด ซึ่งเบราว์เซอร์ทำทุกวิธีอยู่แล้ว จึงไม่ใช่การวัด CPU ทั้งหมดหรืออัตราเฟรม

การเล่นโดยเบราว์เซอร์ไม่ได้ทำให้เลย์เอาต์ การวาด การ 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