Ghiduri · 01

Valori și stil

Dețineți o valoare în componentă, derivați ieșiri cu calc() și alegeți unde se scrie variabila CSS.

Deținerea unei valori

useAnimatedValue(initial) creează un Value care aparține componentei. Folosiți un număr sau o înregistrare precum { x: 0, opacity: 1 }, ale cărei câmpuri sunt valori separate.

În style obișnuit, valoarea hook-ului este tokenul var(--kkwa-…, initial). Actualizările scriu acea variabilă pe elementele care o folosesc; React nu randează.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Derivare cu calc()

Interpolarea fără easing și add, subtract, multiply sau divide cu o constantă devin expresii calc() exacte ale aceleiași variabile. Le calculează browserul; pentru ele nu rulează JavaScript în niciun cadru.

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

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Culori și calcule proprii

Culorile, interpolările cu easing, modulo, diffClamp și AnimatedComputed nu pot fi scrise ca calc(). useAnimatedCSS(node) le dă propria variabilă CSS actualizată de JavaScript, cu aceeași durată de viață ca a componentei.

Folosirea directă a unui astfel de nod în style aruncă o eroare, așa că costul nu e niciodată ascuns.

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

Lăsați hook-ul să dețină rețeta

useAnimated(initial, factory, deps) deține valoarea și fiecare controler declarat sincron în factory. Pornește la montare, repornește când se schimbă o dependență și se oprește la demontare.

Pentru redare condusă de evenimente, transmiteți { autoStart: false }, apoi apelați start(), stop() sau reset() pe valoarea returnată.

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

O singură scriere pentru multe elemente

Implicit, variabila o primește fiecare element al cărui stil inline folosește valoarea. Cu scope, variabila se scrie o dată pe container și o moștenesc copiii lui: alegerea potrivită pentru sute de elemente.

AnimatedProvider scope={ref} setează scope-ul implicit pentru toate valorile de hook de sub el.

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

Citirea valorilor în JavaScript

getValue() returnează un snapshot fără abonare React. useAnimatedListener(node, fn) vă apelează la fiecare schimbare și elimină listenerul la demontare. Folosiți-l pentru desen pe canvas sau analiză, nu pentru randare.