Průvodci · 01

Hodnoty a styl

Vlastněte hodnotu v komponentě, odvozujte výstupy přes calc() a zvolte, kam se zapisuje proměnná CSS.

Vlastnictví hodnoty

useAnimatedValue(initial) vytvoří Value, kterou vlastní komponenta. Použijte číslo nebo záznam jako { x: 0, opacity: 1 }, jehož pole jsou samostatné hodnoty.

V běžném style je hodnota hooku token var(--kkwa-…, initial). Aktualizace zapisují tuto proměnnou na prvky, které ji používají; React nerenderuje.

Příprava příkladu…

JavaScript je vypnutý. Kód níže je celý příklad.

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

Odvození přes calc()

Interpolace bez easing a add, subtract, multiply nebo divide konstantou se stávají přesnými výrazy calc() téže proměnné. Odvozuje je prohlížeč; JavaScript pro ně v každém snímku neběží.

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

Příprava příkladu…

JavaScript je vypnutý. Kód níže je celý příklad.

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

Barvy a vlastní výpočty

Barvy, interpolace s easing, modulo, diffClamp a AnimatedComputed nejde zapsat jako calc(). useAnimatedCSS(node) jim dá vlastní proměnnou CSS aktualizovanou JavaScriptem, se stejnou dobou života jako komponenta.

Použití takového uzlu přímo ve style vyhodí chybu, takže náklady nikdy nejsou skryté.

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

Nechte recept vlastnit hook

useAnimated(initial, factory, deps) vlastní hodnotu a každý controller deklarovaný synchronně ve factory. Spustí se při připojení, znovu se spustí při změně závislosti a při odpojení se zastaví.

Pro přehrávání řízené událostmi předejte { autoStart: false } a pak na vrácené hodnotě volejte start(), stop() nebo reset().

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

Zapsat jednou pro mnoho prvků

Ve výchozím stavu dostane proměnnou každý prvek, jehož inline styl hodnotu používá. Se scope se proměnná zapíše jednou na kontejner a jeho potomci ji zdědí: správná volba pro stovky prvků.

AnimatedProvider scope={ref} nastaví výchozí scope pro všechny hodnoty hooků pod ním.

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

Čtení hodnot v JavaScriptu

getValue() vrátí snímek bez přihlášení Reactu k odběru. useAnimatedListener(node, fn) vás zavolá při každé změně a při odpojení posluchače odebere. Používejte ho pro kreslení do canvas nebo analytiku, ne pro renderování.