Hướng dẫn · 01

Giá trị và kiểu dáng

Sở hữu giá trị trong component, suy ra đầu ra bằng calc() và chọn nơi ghi biến CSS.

Sở hữu một giá trị

useAnimatedValue(initial) tạo một Value thuộc về component. Dùng một số hoặc một bản ghi như { x: 0, opacity: 1 } có các trường là giá trị riêng.

Trong style thông thường, giá trị của hook là token var(--kkwa-…, initial). Các cập nhật ghi biến đó lên phần tử dùng nó; React không render.

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

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

App.jsx

import { timing, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ duration = 600 }) {
  const progress = useAnimatedValue(1);

  const toggle = () => {
    const toValue = progress.getValue() > 0.5 ? 0 : 1;
    timing(progress, { toValue, duration }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Toggle
      </button>
      <div className="box" style={{ opacity: progress }}>
        Ready
      </div>
    </div>
  );
}

styles.css

.stage {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 200px;
  padding: 28px;
}

button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

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

Suy ra bằng calc()

Nội suy không easing và add, subtract, multiply hoặc divide với hằng số trở thành biểu thức calc() chính xác của cùng biến. Trình duyệt tính chúng; không có JavaScript nào chạy cho chúng ở bất kỳ khung hình nào.

Slide.jsx

const progress = useAnimatedValue(0);

// A linear interpolation of a hook value is a calc() of the same CSS variable.
const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '180px'] });
const half = multiply(progress, 0.5);

<div style={{ opacity: half, transform: `translateX(${x})` }} />;

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

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

App.jsx

import { spring, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

const colors = ['#2854ff', '#4a6bff', '#8fb0ff', '#7d9bff', '#5c7cff'];

export default function App({ distance = 220, spread = 0.12 }) {
  const progress = useAnimatedValue(0);

  const toggle = () => {
    const toValue = progress.getValue() < 0.5 ? 1 : 0;
    spring(progress, { toValue, stiffness: 150, damping: 16 }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Move all
      </button>
      <div className="lanes">
        {colors.map((color, index) => {
          const start = index * spread;
          const x = progress.interpolate({
            inputRange: [start, start + 1 - spread * 4],
            outputRange: ['0px', `${distance}px`],
            extrapolate: 'clamp',
          });
          const turn = progress.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', `${90 + index * 45}deg`],
          });
          return (
            <div key={color} className="lane">
              <span style={{ background: color, transform: `translateX(${x}) rotate(${turn})` }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

styles.css

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

button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.lanes {
  display: grid;
  gap: 10px;
}

.lane {
  height: 36px;
  max-width: 320px;
  border-radius: 999px;
  background: #f5f6fb;
}

.lane span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

Màu sắc và phép tính riêng

Màu, nội suy có easing, modulo, diffClamp và AnimatedComputed không thể viết dưới dạng calc(). useAnimatedCSS(node) cấp cho chúng một biến CSS riêng do JavaScript cập nhật, với vòng đời giống component.

Dùng nút như vậy trực tiếp trong style sẽ ném lỗi, nên chi phí không bao giờ bị che giấu.

Glow.jsx

const progress = useAnimatedValue(0);

// Colors and eased curves are not calc() expressions: give them their own CSS value.
const color = useAnimatedCSS(
  progress.interpolate({ inputRange: [0, 1], outputRange: ['#3d3bf3', '#22b8f0'] }),
);

<div style={{ background: color }} />;

Để hook sở hữu công thức

useAnimated(initial, factory, deps) sở hữu giá trị và mọi bộ điều khiển được khai báo đồng bộ trong factory. Nó bắt đầu khi mount, chạy lại khi phụ thuộc thay đổi và dừng khi unmount.

Truyền { autoStart: false } cho kiểu phát do sự kiện điều khiển, rồi gọi start(), stop() hoặc reset() trên giá trị trả về.

Intro.jsx

const intro = useAnimated(
  { opacity: 0, y: 24 },
  (value) => {
    parallel([
      timing(value.opacity, { toValue: 1, duration: 400 }),
      spring(value.y, { toValue: 0, stiffness: 220, damping: 20 }),
    ]);
  },
  [],
);

<section style={{ opacity: intro.opacity, transform: `translateY(calc(${intro.y} * 1px))` }} />;

Một lần ghi cho nhiều phần tử

Mặc định, mọi phần tử có style nội tuyến dùng giá trị đều nhận biến. Với scope, biến được ghi một lần trên phần tử chứa và các con kế thừa nó: lựa chọn đúng cho hàng trăm phần tử.

AnimatedProvider scope={ref} đặt scope mặc định cho mọi giá trị hook bên dưới.

Field.jsx

const field = useRef(null);

// Written once on the field; every child that uses the value inherits it.
const wave = useAnimatedValue(0, { scope: field });

<div ref={field}>
  {items.map((item) => (
    <i key={item} style={{ transform: `rotate(calc(${wave} * 1turn))` }} />
  ))}
</div>;

Đọc giá trị trong JavaScript

getValue() trả về một snapshot mà không đăng ký React. useAnimatedListener(node, fn) gọi bạn ở mỗi thay đổi và gỡ listener khi unmount. Dùng nó để vẽ lên canvas hoặc phân tích, không phải để render.