Chuyển động cho React DOM · API Animated của React Native

Viết chuyển động một lần. Chạy mượt, không bao giờ gãy.

Animated đưa Animated của React Native lên web. Một giá trị điều khiển bao nhiêu phần tử cũng được mà không render React ở mỗi khung hình, chuyển động được hỗ trợ do chính trình duyệt phát, và mọi lần ngắt đều tiếp tục từ những gì đang trên màn hình.

Bắt đầu Xem ví dụ

Cài đặt

npm install @kkwaenggwari/animated

Một giá trị đồng hồ điều khiển sóng của cả 64 hình. Di chuyển con trỏ trên sân khấu.

Đo trên bản build này

Đo bằng bản build 1.0.0 trên Chrome headless ở một PC để bàn. Số liệu phụ thuộc vào thiết bị. Cách chúng tôi đo

0.00msJavaScript mỗi khung hình khi 400 phần tử di chuyển
Chuyển động transform và opacity có giới hạn trên phần tử Animated do trình duyệt phát. Các callback khung hình của trang không phải làm gì.
0.13msJavaScript mỗi khung hình khi một giá trị điều khiển 10.000 phần tử
Giá trị ghi một biến CSS; mỗi phần tử tự suy ra kiểu dáng của mình từ biến đó trong CSS.
0Lần render React trong lúc chuyển động
Giá trị không bao giờ đi qua state React. Component render khi props của bạn thay đổi, không phải khi khung hình đổi.

01 · Đơn giản

API bạn đã biết, trên style React thông thường

timing, spring, interpolate, loop và Animated.event giữ nguyên tên và cấu hình của React Native. Giá trị đi thẳng vào prop style thông thường, nên không cần học component đặc biệt nào trước chuyển động đầu tiên.

Mang mã React Native sang bằng cách đổi Animated.View thành Animated.div.
Một giá trị có thể cùng lúc di chuyển một dải, một mặt số và một hàng thẻ, mỗi thứ với khoảng riêng.
useAnimated sở hữu công thức: bắt đầu khi mount, chạy lại khi phụ thuộc thay đổi và dọn dẹp khi unmount.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Lời gọi giống hệt 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 · Nhanh

Không render React ở mỗi khung hình

Giá trị của hook là một biến CSS. Nội suy tuyến tính và phép tính trở thành biểu thức calc() chính xác của biến đó, nên mỗi khung hình chỉ là một lần ghi và phần còn lại do trình duyệt tính. Chuyển động transform và opacity có giới hạn trên phần tử Animated.<tag> do trình duyệt phát mà không cần callback khung hình.

Đổi số chấm: bộ đếm cho thấy React render một lần cho mỗi thay đổi, không bao giờ theo từng khung hình.
scope ghi giá trị một lần trên phần tử chứa thay vì trên từng phần tử.
inspect(element) cho biết mỗi thuộc tính dùng đường nào và vì sao.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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 · Ổn định

Ngắt ở đâu cũng được. Nó vẫn tiếp tục.

Mục tiêu mới bắt đầu từ chỗ phần tử đang ở trên màn hình, và lò xo còn giữ cả vận tốc, nên quay đầu giữa chừng sẽ uốn mượt thay vì dừng lại trước. Bộ điều khiển khai báo trong hook dừng và được giải phóng khi bị thay thế và khi unmount, còn markup render phía máy chủ vẫn tiếp tục hoạt ảnh sau khi hydrate.

Nhấp nhanh hai lần: với spring đường đi uốn cong, với timing vị trí được giữ nhưng một đường cong mới bắt đầu.
Dừng lại thì giá trị ở yên đó; không có gì nhảy đến trạng thái cuối.
Không còn vòng lặp khung hình bị bỏ quên sau khi unmount, đổi route hay tab bị ẩn.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Bạn có thể xây gì

Mẫu hoàn chỉnh với cài đặt điều chỉnh được và đầy đủ mã nguồn.

Tất cả ví dụ

Xây trên Animated

Cần component có sẵn? Animated Chorus.

Số cuộn, điểm nhấn thẻ di chuyển, tiến độ, sheet và danh sách hoạt ảnh gắn thẳng vào React và React Native. Ba thứ này đang chạy ngay trên trang này.

Ghé Animated Chorus

Bắt đầu trong ba phút

Cài gói, cho giá trị đầu tiên chuyển động, rồi chọn hướng dẫn cho việc bạn đang làm.

npm install @kkwaenggwari/animated