การเคลื่อนไหวสำหรับ React DOM · Animated API ของ React Native

เขียนการเคลื่อนไหวครั้งเดียว ลื่นไหล ไม่มีวันพัง

Animated นำ Animated ของ React Native มาสู่เว็บ ค่าเดียวขับองค์ประกอบได้ไม่จำกัดโดยไม่มีการเรนเดอร์ React ในทุกเฟรม การเคลื่อนไหวที่รองรับจะเล่นโดยเบราว์เซอร์เอง และทุกการขัดจังหวะจะทำต่อจากสิ่งที่อยู่บนหน้าจอ

เริ่มต้นใช้งาน ดูตัวอย่าง

ติดตั้ง

npm install @kkwaenggwari/animated

ค่านาฬิกาเดียวขับคลื่นของรูปทรงทั้ง 64 ชิ้น ลองเลื่อนตัวชี้ไปบนเวที

วัดบนบิลด์นี้

วัดด้วยบิลด์ 1.0.0 ใน Chrome แบบ headless บน PC เดสก์ท็อป ตัวเลขขึ้นอยู่กับอุปกรณ์ เราวัดอย่างไร

0.00msJavaScript ต่อเฟรมขณะที่ 400 องค์ประกอบเคลื่อนที่
การเคลื่อนไหว transform และ opacity ที่มีจุดสิ้นสุดบนองค์ประกอบ Animated เล่นโดยเบราว์เซอร์ callback ของเฟรมในหน้าเองไม่ต้องทำงานใด ๆ
0.13msJavaScript ต่อเฟรมเมื่อค่าเดียวขับ 10,000 องค์ประกอบ
ค่าจะเขียนตัวแปร CSS ตัวเดียว แล้วแต่ละองค์ประกอบคำนวณสไตล์ของตัวเองจากตัวแปรนั้นใน CSS
0การเรนเดอร์ React ระหว่างการเคลื่อนไหว
ค่าไม่เคยผ่าน state ของ React คอมโพเนนต์เรนเดอร์เมื่อ props ของคุณเปลี่ยน ไม่ใช่เมื่อเฟรมเปลี่ยน

01 · ง่าย

API ที่คุณรู้จักอยู่แล้ว บน style ธรรมดาของ React

timing, spring, interpolate, loop และ Animated.event ใช้ชื่อและการตั้งค่าเดียวกับ React Native ค่าเข้าไปใน prop style ธรรมดาได้เลย จึงไม่ต้องเรียนรู้คอมโพเนนต์พิเศษก่อนการเคลื่อนไหวแรก

ย้ายโค้ด React Native มาได้ด้วยการเปลี่ยนชื่อ Animated.View เป็น Animated.div
ค่าเดียวขับแถบ หน้าปัด และแถวการ์ดได้พร้อมกัน แต่ละตัวมีช่วงของตัวเอง
useAnimated ถือครองสูตร: เริ่มเมื่อ mount เริ่มใหม่เมื่อ dependency เปลี่ยน และเก็บกวาดเมื่อ unmount

กำลังเตรียมตัวอย่าง…

JavaScript ถูกปิดอยู่ โค้ดด้านล่างคือตัวอย่างฉบับสมบูรณ์

App.jsx

import { Easing, delay, loop, sequence, spring, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const curves = {
  linear: Easing.linear,
  inOut: Easing.inOut(Easing.cubic),
  back: Easing.out(Easing.back(1.7)),
  bounce: Easing.bounce,
};

export default function App({ tempo = 'spring', duration = 900, easing = 'inOut' }) {
  // One value. The recipe restarts when a prop changes.
  const progress = useAnimated(
    0,
    (value) => {
      const go = (toValue) =>
        tempo === 'spring'
          ? spring(value, { toValue, stiffness: 120, damping: 11 })
          : timing(value, { toValue, duration, easing: curves[easing] });
      loop(sequence([go(1), delay(500), go(0), delay(500)]));
    },
    [tempo, duration, easing],
  );

  const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '200px'] });
  const turn = progress.interpolate({ inputRange: [0, 1], outputRange: ['-90deg', '180deg'] });

  return (
    <div className="stage">
      <div className="track">
        <div className="fill" style={{ transform: `scaleX(${progress})` }} />
      </div>
      <div className="row">
        <div className="dial">
          <i style={{ transform: `rotate(${turn})` }} />
        </div>
        <div className="lane">
          <div className="puck" style={{ transform: `translateX(${x})` }} />
        </div>
      </div>
      <div className="cards">
        {[0, 1, 2, 3].map((index) => {
          const start = index * 0.15;
          const lift = progress.interpolate({
            inputRange: [start, start + 0.55],
            outputRange: ['0px', '-26px'],
            extrapolate: 'clamp',
          });
          return (
            <div key={index} className="card" style={{ transform: `translateY(${lift})` }}>
              {index + 1}
            </div>
          );
        })}
      </div>
      <p className="note">One value → 7 elements, ordinary React style</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.track {
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid #e4e6ef;
  border-radius: 50%;
}

.dial i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #8fb0ff;
  transform-origin: left center;
}

.lane {
  flex: 1 1 244px;
  max-width: 260px;
  height: 44px;
  border-radius: 999px;
  background: #f5f6fb;
}

.puck {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7cff;
}

.cards {
  display: flex;
  gap: 12px;
  padding-top: 30px;
}

.card {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

.note {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

การเรียกแบบเดียวกับ React Native

Spinner.jsx

// React Native
<Animated.View style={{ transform: [{ rotate }] }} />

// React DOM with @kkwaenggwari/animated — the rest is identical
<Animated.div style={{ transform: [{ rotate }] }} />

const spin = useAnimatedValue(0);
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });

Animated.loop(
  Animated.timing(spin, { toValue: 1, duration: 900, easing: Easing.linear, useNativeDriver: true }),
).start();

02 · เร็ว

ไม่มีการเรนเดอร์ React ในทุกเฟรม

ค่าของ hook คือตัวแปร CSS การอินเทอร์โพเลตแบบเชิงเส้นและการคำนวณจะกลายเป็นนิพจน์ calc() ที่แม่นยำของตัวแปรนั้น ทุกเฟรมจึงเป็นการเขียนครั้งเดียวและส่วนที่เหลือเบราว์เซอร์คำนวณเอง การเคลื่อนไหว transform และ opacity ที่มีจุดสิ้นสุดบนองค์ประกอบ Animated.<tag> เล่นโดยเบราว์เซอร์โดยไม่ต้องมี callback ของเฟรม

เปลี่ยนจำนวนจุด: ตัวนับแสดงว่า React เรนเดอร์ครั้งเดียวต่อการเปลี่ยนแปลง ไม่เคยเรนเดอร์ต่อเฟรม
scope เขียนค่าครั้งเดียวที่คอนเทนเนอร์แทนที่จะเขียนทุกองค์ประกอบ
inspect(element) บอกว่าแต่ละพร็อพเพอร์ตีใช้เส้นทางใดและเพราะอะไร

กำลังเตรียมตัวอย่าง…

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

03 · เสถียร

ขัดจังหวะตรงไหนก็ได้ มันจะทำต่อ

เป้าหมายใหม่เริ่มจากตำแหน่งที่องค์ประกอบอยู่บนหน้าจอ และสปริงยังรักษาความเร็วไว้ด้วย การกลับทิศกลางทางจึงโค้งอย่างลื่นไหลแทนที่จะหยุดก่อน ตัวควบคุมที่ประกาศใน hook จะหยุดและถูกปล่อยเมื่อถูกแทนที่และเมื่อ unmount ส่วน markup ที่เรนเดอร์บนเซิร์ฟเวอร์จะเคลื่อนไหวต่อหลัง hydration

คลิกสองครั้งเร็ว ๆ: กับ spring เส้นทางจะโค้ง กับ timing ตำแหน่งจะคงอยู่แต่เริ่มเส้นโค้งใหม่
การหยุดทิ้งค่าไว้ที่เดิม ไม่มีอะไรกระโดดไปสถานะสุดท้าย
ไม่มีลูปเฟรมที่ถูกลืมหลัง unmount เปลี่ยน route หรือแท็บถูกซ่อน

กำลังเตรียมตัวอย่าง…

JavaScript ถูกปิดอยู่ โค้ดด้านล่างคือตัวอย่างฉบับสมบูรณ์

App.jsx

import { useRef } from 'react';
import {
  Easing,
  spring,
  timing,
  useAnimatedListener,
  useAnimatedValueXY,
} from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tempo = 'spring', stiffness = 140, damping = 14 }) {
  const point = useAnimatedValueXY({ x: 80, y: 120 });
  const canvas = useRef(null);

  const moveTo = (event) => {
    const box = event.currentTarget.getBoundingClientRect();
    const toValue = { x: event.clientX - box.left, y: event.clientY - box.top };
    // A new target starts from where the puck is now.
    const motion =
      tempo === 'spring'
        ? spring(point, { toValue, stiffness, damping })
        : timing(point, { toValue, duration: 700, easing: Easing.inOut(Easing.cubic) });
    motion.start();
  };

  // Draw the path the puck actually travels.
  const last = useRef(null);
  useAnimatedListener(point, ({ x, y }) => {
    const context = canvas.current?.getContext('2d');
    if (!context) return;
    context.fillStyle = 'rgba(11, 20, 64, 0.025)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    if (last.current) {
      context.strokeStyle = tempo === 'spring' ? '#8fb0ff' : '#ffffff';
      context.lineWidth = 4;
      context.lineCap = 'round';
      context.beginPath();
      context.moveTo(last.current.x, last.current.y);
      context.lineTo(x, y);
      context.stroke();
    }
    last.current = { x, y };
  });

  return (
    <div className="stage">
      <div className="track" onPointerDown={moveTo}>
        <canvas ref={canvas} width={720} height={320} />
        <div
          className="puck"
          style={{
            transform: `translate(calc(${point.x} * 1px - 50%), calc(${point.y} * 1px - 50%))`,
          }}
        />
        <p>Click anywhere. Click again before it stops.</p>
      </div>
    </div>
  );
}

styles.css

.stage {
  padding: 20px;
}

.track {
  position: relative;
  height: 320px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.track canvas {
  position: absolute;
  inset: 0;
  width: 720px;
  height: 320px;
}

.puck {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2854ff;
}

.track p {
  position: absolute;
  inset: auto 16px 12px;
  margin: 0;
  color: #b8c4ef;
  font-size: 14px;
  pointer-events: none;
}

สิ่งที่คุณสร้างได้

แพตเทิร์นครบชุด พร้อมการตั้งค่าที่ปรับได้และซอร์สโค้ดฉบับเต็ม

ตัวอย่างทั้งหมด

สร้างบน Animated

ต้องการคอมโพเนนต์สำเร็จรูป? Animated Chorus

ตัวเลขที่หมุน ไฮไลต์การ์ดที่เคลื่อนที่ ความคืบหน้า ชีต และรายการแบบเคลื่อนไหว ที่ใส่ลงใน React และ React Native ได้ทันที ทั้งสามตัวนี้กำลังทำงานอยู่บนหน้านี้

ไปที่ Animated Chorus

เริ่มได้ในสามนาที

ติดตั้งแพ็กเกจ ทำให้ค่าแรกเคลื่อนไหว แล้วเลือกคู่มือสำหรับงานตรงหน้า

npm install @kkwaenggwari/animated