Gidsen · 01

Waarden en stijl

Bezit een waarde in een component, leid uitvoer af met calc() en kies waar de CSS-variabele wordt geschreven.

Bezit een waarde

useAnimatedValue(initial) maakt een Value die van het component is. Gebruik een getal, of een record zoals { x: 0, opacity: 1 } waarvan de velden aparte waarden zijn.

In een gewone style is een hookwaarde het token var(--kkwa-…, initial). Updates schrijven die variabele op de elementen die hem gebruiken; React rendert niet.

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Afleiden met calc()

Een interpolatie zonder easing en add, subtract, multiply of divide met een constante worden exacte calc()-expressies van dezelfde variabele. De browser leidt ze af; er draait per frame geen JavaScript voor.

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

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kleuren en eigen berekeningen

Kleuren, interpolaties met easing, modulo, diffClamp en AnimatedComputed kunnen niet als calc() worden geschreven. useAnimatedCSS(node) geeft ze een eigen CSS-variabele, bijgewerkt door JavaScript, met dezelfde levensduur als het component.

Zo'n node direct in style gebruiken gooit een fout, zodat de kosten nooit verborgen zijn.

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

Laat de hook een recept bezitten

useAnimated(initial, factory, deps) bezit de waarde en elke controller die synchroon in de factory is gedeclareerd. Hij start bij mount, start opnieuw als een afhankelijkheid verandert en stopt bij unmount.

Geef { autoStart: false } mee voor afspelen op events, en roep dan start(), stop() of reset() aan op de teruggegeven waarde.

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

Eén keer schrijven voor veel elementen

Standaard krijgt elk element waarvan de inline style de waarde gebruikt de variabele. Met scope wordt de variabele één keer op een container geschreven en door de kinderen geërfd: de juiste keuze voor honderden elementen.

AnimatedProvider scope={ref} stelt een standaardscope in voor elke hookwaarde eronder.

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

Waarden lezen in JavaScript

getValue() geeft een snapshot terug zonder React te abonneren. useAnimatedListener(node, fn) roept je bij elke wijziging aan en verwijdert de listener bij unmount. Gebruik het voor tekenen op canvas of voor analytics, niet om te renderen.