Judesys React DOM · React Native Animated API

Parašykite judesį kartą. Jis veikia sklandžiai ir niekada nesugenda.

Animated perkelia React Native Animated į žiniatinklį. Viena reikšmė valdo bet kiek elementų be React perpiešimo kiekviename kadre, palaikomą judesį groja pati naršyklė, o kiekvienas pertraukimas tęsiasi nuo to, kas yra ekrane.

Pradėkite Žiūrėti pavyzdžius

Diegimas

npm install @kkwaenggwari/animated

Viena laikrodžio reikšmė valdo visų 64 figūrų bangas. Judinkite žymeklį virš scenos.

Išmatuota šiame leidime

Išmatuota su 1.0.0 versija Chrome be sąsajos staliniame PC. Skaičiai priklauso nuo įrenginio. Kaip matavome

0.00msJavaScript per kadrą, kol juda 400 elementų
Baigtinį transform ir opacity judesį Animated elementuose groja naršyklė. Paties puslapio kadrų callback neatlieka jokio darbo.
0.13msJavaScript per kadrą, kai viena reikšmė valdo 10 000 elementų
Reikšmė įrašo vieną CSS kintamąjį; kiekvienas elementas CSS iš jo išveda savo stilių.
0React perpiešimai judesio metu
Reikšmės niekada nepereina per React būseną. Komponentai perpiešiami, kai pasikeičia jūsų props, o ne kai pasikeičia kadras.

01 · Paprasta

Jau žinomas API, paprastame React style

timing, spring, interpolate, loop ir Animated.event išlaiko React Native pavadinimus ir konfigūracijas. Reikšmė patenka tiesiai į paprastą style prop, todėl prieš pirmąjį judesį nereikia mokytis jokio specialaus komponento.

Perkelkite React Native kodą pervadindami Animated.View į Animated.div.
Viena reikšmė gali vienu metu judinti juostelę, ciferblatą ir kortelių eilę, kiekvieną savo diapazone.
useAnimated valdo receptą: pradeda prijungiant, pradeda iš naujo pasikeitus priklausomybei ir sutvarko atjungiant.

Ruošiamas pavyzdys…

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

App.jsx

import { Easing, delay, loop, sequence, spring, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const curves = {
  linear: Easing.linear,
  inOut: Easing.inOut(Easing.cubic),
  back: Easing.out(Easing.back(1.7)),
  bounce: Easing.bounce,
};

export default function App({ tempo = 'spring', duration = 900, easing = 'inOut' }) {
  // One value. The recipe restarts when a prop changes.
  const progress = useAnimated(
    0,
    (value) => {
      const go = (toValue) =>
        tempo === 'spring'
          ? spring(value, { toValue, stiffness: 120, damping: 11 })
          : timing(value, { toValue, duration, easing: curves[easing] });
      loop(sequence([go(1), delay(500), go(0), delay(500)]));
    },
    [tempo, duration, easing],
  );

  const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '200px'] });
  const turn = progress.interpolate({ inputRange: [0, 1], outputRange: ['-90deg', '180deg'] });

  return (
    <div className="stage">
      <div className="track">
        <div className="fill" style={{ transform: `scaleX(${progress})` }} />
      </div>
      <div className="row">
        <div className="dial">
          <i style={{ transform: `rotate(${turn})` }} />
        </div>
        <div className="lane">
          <div className="puck" style={{ transform: `translateX(${x})` }} />
        </div>
      </div>
      <div className="cards">
        {[0, 1, 2, 3].map((index) => {
          const start = index * 0.15;
          const lift = progress.interpolate({
            inputRange: [start, start + 0.55],
            outputRange: ['0px', '-26px'],
            extrapolate: 'clamp',
          });
          return (
            <div key={index} className="card" style={{ transform: `translateY(${lift})` }}>
              {index + 1}
            </div>
          );
        })}
      </div>
      <p className="note">One value → 7 elements, ordinary React style</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.track {
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid #e4e6ef;
  border-radius: 50%;
}

.dial i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #8fb0ff;
  transform-origin: left center;
}

.lane {
  flex: 1 1 244px;
  max-width: 260px;
  height: 44px;
  border-radius: 999px;
  background: #f5f6fb;
}

.puck {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7cff;
}

.cards {
  display: flex;
  gap: 12px;
  padding-top: 30px;
}

.card {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

.note {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

Tie patys kvietimai kaip React Native

Spinner.jsx

// React Native
<Animated.View style={{ transform: [{ rotate }] }} />

// React DOM with @kkwaenggwari/animated — the rest is identical
<Animated.div style={{ transform: [{ rotate }] }} />

const spin = useAnimatedValue(0);
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });

Animated.loop(
  Animated.timing(spin, { toValue: 1, duration: 900, easing: Easing.linear, useNativeDriver: true }),
).start();

02 · Greita

Jokio React perpiešimo kiekviename kadre

hook reikšmė yra CSS kintamasis. Tiesinės interpoliacijos ir aritmetika tampa tiksliomis to kintamojo calc() išraiškomis, todėl kiekvienas kadras yra vienas įrašymas, o likusius skaičiavimus atlieka naršyklė. Baigtinį transform ir opacity judesį Animated.<tag> elementuose naršyklė groja be kadrų callback.

Pakeiskite taškų skaičių: skaitiklis rodo, kad React perpiešė vieną kartą per pakeitimą, niekada per kadrą.
scope įrašo reikšmę vieną kartą į konteinerį, o ne į kiekvieną elementą.
inspect(element) pasako, kokį kelią naudoja kiekviena savybė ir kodėl.

Ruošiamas pavyzdys…

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

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

03 · Stabilu

Pertraukite bet kur. Jis tęsia.

Naujas tikslas prasideda ten, kur elementas yra ekrane, o spyruoklė išlaiko ir greitį, todėl apsisukimas pusiaukelėje sklandžiai išlinksta, užuot pirmiausia sustojęs. hook aprašyti valdikliai sustabdomi ir atlaisvinami pakeičiant ir atjungiant, o serveryje atvaizduotas markup po hidratacijos toliau animuojamas.

Spustelėkite du kartus greitai: su spring trajektorija išlinksta, su timing padėtis išlieka, bet prasideda nauja kreivė.
Sustabdymas palieka reikšmę ten, kur ji yra; niekas nepašoka į galutinę būseną.
Jokių pamirštų kadrų ciklų po atjungimo, maršruto pakeitimo ar paslėpto skirtuko.

Ruošiamas pavyzdys…

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

App.jsx

import { useRef } from 'react';
import {
  Easing,
  spring,
  timing,
  useAnimatedListener,
  useAnimatedValueXY,
} from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tempo = 'spring', stiffness = 140, damping = 14 }) {
  const point = useAnimatedValueXY({ x: 80, y: 120 });
  const canvas = useRef(null);

  const moveTo = (event) => {
    const box = event.currentTarget.getBoundingClientRect();
    const toValue = { x: event.clientX - box.left, y: event.clientY - box.top };
    // A new target starts from where the puck is now.
    const motion =
      tempo === 'spring'
        ? spring(point, { toValue, stiffness, damping })
        : timing(point, { toValue, duration: 700, easing: Easing.inOut(Easing.cubic) });
    motion.start();
  };

  // Draw the path the puck actually travels.
  const last = useRef(null);
  useAnimatedListener(point, ({ x, y }) => {
    const context = canvas.current?.getContext('2d');
    if (!context) return;
    context.fillStyle = 'rgba(11, 20, 64, 0.025)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    if (last.current) {
      context.strokeStyle = tempo === 'spring' ? '#8fb0ff' : '#ffffff';
      context.lineWidth = 4;
      context.lineCap = 'round';
      context.beginPath();
      context.moveTo(last.current.x, last.current.y);
      context.lineTo(x, y);
      context.stroke();
    }
    last.current = { x, y };
  });

  return (
    <div className="stage">
      <div className="track" onPointerDown={moveTo}>
        <canvas ref={canvas} width={720} height={320} />
        <div
          className="puck"
          style={{
            transform: `translate(calc(${point.x} * 1px - 50%), calc(${point.y} * 1px - 50%))`,
          }}
        />
        <p>Click anywhere. Click again before it stops.</p>
      </div>
    </div>
  );
}

styles.css

.stage {
  padding: 20px;
}

.track {
  position: relative;
  height: 320px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.track canvas {
  position: absolute;
  inset: 0;
  width: 720px;
  height: 320px;
}

.puck {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2854ff;
}

.track p {
  position: absolute;
  inset: auto 16px 12px;
  margin: 0;
  color: #b8c4ef;
  font-size: 14px;
  pointer-events: none;
}

Ką galite sukurti

Išbaigti šablonai su reguliuojamais nustatymais ir visu pirminiu kodu.

Visi pavyzdžiai

Sukurta su Animated

Reikia paruošto komponento? Animated Chorus.

Besisukantys skaičiai, keliaujantys kortelių paryškinimai, eiga, sheet ir animuoti sąrašai, kurie tiesiai įsiterpia į React ir React Native. Šie trys veikia būtent dabar šiame puslapyje.

Apsilankykite Animated Chorus

Pradėkite per tris minutes

Įdiekite paketą, pajudinkite pirmąją reikšmę, tada pasirinkite vadovą jūsų laukiančiai užduočiai.

npm install @kkwaenggwari/animated