Vadovai · 01

Reikšmės ir stilius

Laikykite reikšmę komponente, išveskite išvestis su calc() ir pasirinkite, kur įrašomas CSS kintamasis.

Reikšmės valdymas

useAnimatedValue(initial) sukuria komponentui priklausančią Value. Naudokite skaičių arba įrašą, pavyzdžiui, { x: 0, opacity: 1 }, kurio laukai yra atskiros reikšmės.

Paprastame style hook reikšmė yra žetonas var(--kkwa-…, initial). Atnaujinimai įrašo tą kintamąjį į jį naudojančius elementus; React neperpiešia.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Išvedimas su calc()

Interpoliacija be easing ir add, subtract, multiply ar divide su konstanta tampa tiksliomis to paties kintamojo calc() išraiškomis. Jas apskaičiuoja naršyklė; jokiame kadre dėl jų nevykdomas JavaScript.

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

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Spalvos ir savi skaičiavimai

Spalvų, interpoliacijų su easing, modulo, diffClamp ir AnimatedComputed negalima užrašyti kaip calc(). useAnimatedCSS(node) suteikia joms savo CSS kintamąjį, kurį atnaujina JavaScript, su tokiu pat gyvavimo laiku kaip komponentas.

Tokį mazgą naudojant tiesiai style išmetama klaida, todėl kaina niekada nepaslėpta.

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

Leiskite hook valdyti receptą

useAnimated(initial, factory, deps) valdo reikšmę ir kiekvieną factory sinchroniškai aprašytą valdiklį. Jis paleidžiamas prijungiant, paleidžiamas iš naujo pasikeitus priklausomybei ir sustabdomas atjungiant.

Įvykių valdomam grojimui perduokite { autoStart: false }, tada grąžintai reikšmei iškvieskite start(), stop() arba 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))` }} />;

Vienas įrašymas daugeliui elementų

Pagal numatymą kintamąjį gauna kiekvienas elementas, kurio vidinis stilius naudoja reikšmę. Su scope kintamasis įrašomas vieną kartą į konteinerį ir jį paveldi jo vaikai: tinkamas pasirinkimas šimtams elementų.

AnimatedProvider scope={ref} nustato numatytąjį scope visoms po juo esančioms hook reikšmėms.

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

Reikšmių skaitymas JavaScript kode

getValue() grąžina momentinę kopiją be React prenumeratos. useAnimatedListener(node, fn) iškviečia jus po kiekvieno pakeitimo ir pašalina listener atjungiant. Naudokite jį piešimui canvas ar analitikai, o ne atvaizdavimui.