Panduan · 01

Nilai dan gaya

Miliki nilai di komponen, turunkan keluaran dengan calc(), dan pilih di mana variabel CSS ditulis.

Memiliki nilai

useAnimatedValue(initial) membuat Value milik komponen. Gunakan angka atau record seperti { x: 0, opacity: 1 } yang field-nya adalah nilai terpisah.

Di style biasa, nilai hook adalah token var(--kkwa-…, initial). Pembaruan menulis variabel itu ke elemen yang memakainya; React tidak merender.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Menurunkan dengan calc()

Interpolasi tanpa easing serta add, subtract, multiply, atau divide dengan konstanta menjadi ekspresi calc() yang tepat dari variabel yang sama. Browser menghitungnya; tidak ada JavaScript yang berjalan untuknya di frame mana pun.

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})` }} />;

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Warna dan perhitungan sendiri

Warna, interpolasi dengan easing, modulo, diffClamp, dan AnimatedComputed tidak dapat ditulis sebagai calc(). useAnimatedCSS(node) memberinya variabel CSS sendiri yang diperbarui JavaScript, dengan masa hidup yang sama dengan komponen.

Memakai node seperti itu langsung di style melempar kesalahan, jadi biayanya tidak pernah tersembunyi.

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

Biarkan hook memiliki resepnya

useAnimated(initial, factory, deps) memiliki nilai dan setiap pengendali yang dideklarasikan secara sinkron di factory. Ia dimulai saat mount, dimulai ulang saat dependensi berubah, dan berhenti saat unmount.

Berikan { autoStart: false } untuk pemutaran yang digerakkan event, lalu panggil start(), stop(), atau reset() pada nilai yang dikembalikan.

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))` }} />;

Satu penulisan untuk banyak elemen

Secara bawaan, variabel diberikan ke setiap elemen yang gaya inline-nya memakai nilai itu. Dengan scope, variabel ditulis sekali pada wadah dan diwarisi anak-anaknya: pilihan tepat untuk ratusan elemen.

AnimatedProvider scope={ref} menetapkan scope bawaan untuk semua nilai hook di bawahnya.

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

Membaca nilai di JavaScript

getValue() mengembalikan snapshot tanpa langganan React. useAnimatedListener(node, fn) memanggil Anda pada setiap perubahan dan melepas listener saat unmount. Gunakan untuk menggambar di canvas atau analitik, bukan untuk render.