Gibanje za React DOM · Animated API iz React Nativa

Gibanje napišite enkrat. Teče gladko in se nikoli ne pokvari.

Animated prinaša Animated iz React Nativa na splet. Ena vrednost upravlja poljubno število elementov brez upodabljanja Reacta v vsaki sličici, podprto gibanje predvaja kar brskalnik, vsaka prekinitev pa nadaljuje od tistega, kar je na zaslonu.

Začnite Oglejte si primere

Namestitev

npm install @kkwaenggwari/animated

Ena vrednost ure upravlja valove vseh 64 oblik. Premikajte kazalec nad odrom.

Izmerjeno na tej izdaji

Izmerjeno z gradnjo 1.0.0 v Chromu brez vmesnika na namiznem PC-ju. Številke so odvisne od naprave. Kako smo merili

0.00msJavaScript na sličico, medtem ko se premika 400 elementov
Končno gibanje transforma in opacityja na elementih Animated predvaja brskalnik. Lastni callbacki sličic strani ne opravijo nobenega dela.
0.13msJavaScript na sličico, ko ena vrednost upravlja 10.000 elementov
Vrednost zapiše eno spremenljivko CSS; vsak element iz nje v CSS izpelje svoj slog.
0Upodobitve Reacta med gibanjem
Vrednosti nikoli ne gredo skozi stanje Reacta. Komponente se upodobijo, ko se spremenijo vaši props, ne pa, ko se spremeni sličica.

01 · Preprosto

API, ki ga že poznate, na navadnem style Reacta

timing, spring, interpolate, loop in Animated.event ohranijo imena in nastavitve iz React Nativa. Vrednost gre neposredno v navaden prop style, zato se pred prvim gibanjem ni treba učiti nobene posebne komponente.

Kodo iz React Nativa prenesete tako, da Animated.View preimenujete v Animated.div.
Ena vrednost lahko hkrati premika trak, številčnico in vrsto kartic, vsako z lastnim razponom.
useAnimated ima v lasti recept: zažene se ob priklopu, znova se zažene, ko se odvisnost spremeni, in pospravi ob odklopu.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Isti klici kot v React Nativu

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 · Hitro

Brez upodabljanja Reacta v vsaki sličici

Vrednost hooka je spremenljivka CSS. Linearne interpolacije in aritmetika postanejo natančni izrazi calc() te spremenljivke, zato je vsaka sličica en zapis, ostalo pa izračuna brskalnik. Končno gibanje transforma in opacityja na elementih Animated.<tag> predvaja brskalnik brez callbackov sličic.

Spremenite število točk: števec pokaže, da je React upodobil enkrat na spremembo, nikoli na sličico.
scope zapiše vrednost enkrat na vsebnik namesto na vsak element.
inspect(element) pove, katero pot uporablja vsaka lastnost in zakaj.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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 · Stabilno

Prekinite ga kjer koli. Nadaljuje.

Nov cilj se začne tam, kjer je element na zaslonu, vzmet pa ohrani tudi hitrost, zato se obrat na pol poti gladko ukrivi, namesto da bi se najprej ustavil. Krmilniki, deklarirani v hooku, se ob zamenjavi in odklopu ustavijo in sprostijo, markup, upodobljen na strežniku, pa se po hidraciji animira naprej.

Kliknite dvakrat hitro: s spring se pot ukrivi, s timing položaj ostane, začne pa se nova krivulja.
Ustavitev pusti vrednost, kjer je; nič ne skoči v končno stanje.
Po odklopu, menjavi poti ali skritem zavihku ne ostanejo pozabljene zanke sličic.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Kaj lahko zgradite

Celotni vzorci z nastavljivimi nastavitvami in celotno izvorno kodo.

Vsi primeri

Zgrajeno na Animated

Potrebujete pripravljeno komponento? Animated Chorus.

Vrteča se števila, poudarki kartic, ki potujejo, napredek, sheeti in animirani seznami, ki se neposredno vstavijo v React in React Native. Ti trije prav zdaj tečejo na tej strani.

Obiščite Animated Chorus

Začnite v treh minutah

Namestite paket, premaknite prvo vrednost, nato pa izberite vodnik za nalogo pred vami.

npm install @kkwaenggwari/animated