Liikettä React DOMille · React Nativen Animated API

Kirjoita liike kerran. Se kulkee sujuvasti eikä hajoa koskaan.

Animated tuo React Nativen Animatedin webiin. Yksi arvo ohjaa kuinka monta elementtiä tahansa ilman React-renderöintiä joka ruudussa, tuetun liikkeen toistaa selain itse, ja jokainen keskeytys jatkuu siitä, mitä näytöllä on.

Aloita Katso esimerkit

Asennus

npm install @kkwaenggwari/animated

Yksi kelloarvo ohjaa kaikkien 64 muodon aaltoja. Liikuta osoitinta näyttämön yllä.

Mitattu tällä julkaisulla

Mitattu 1.0.0-koonnilla headless-Chromessa pöytä-PC:llä. Luvut riippuvat laitteesta. Miten mittasimme

0.00msJavaScript ruutua kohden, kun 400 elementtiä liikkuu
Äärellisen transform- ja opacity-liikkeen Animated-elementeissä toistaa selain. Sivun omat ruutucallbackit eivät tee mitään työtä.
0.13msJavaScript ruutua kohden, kun yksi arvo ohjaa 10 000 elementtiä
Arvo kirjoittaa yhden CSS-muuttujan; jokainen elementti johtaa siitä oman tyylinsä CSS:ssä.
0React-renderöinnit liikkeen aikana
Arvot eivät koskaan kulje Reactin tilan kautta. Komponentit renderöityvät, kun propsisi muuttuvat, eivät ruudun vaihtuessa.

01 · Yksinkertainen

API, jonka jo tunnet, tavallisessa React style -propissa

timing, spring, interpolate, loop ja Animated.event säilyttävät React Nativen nimet ja asetukset. Arvo menee suoraan tavalliseen style-propsiin, joten erityistä komponenttia ei tarvitse opetella ennen ensimmäistä liikettä.

Tuo React Native -koodi nimeämällä Animated.View muotoon Animated.div.
Yksi arvo voi liikuttaa samanaikaisesti nauhaa, kellotaulua ja korttiriviä, kutakin omalla alueellaan.
useAnimated omistaa reseptin: se käynnistyy kiinnitettäessä, käynnistyy uudelleen riippuvuuden muuttuessa ja siivoaa irrotettaessa.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Samat kutsut kuin React Nativessa

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

Ei React-renderöintiä joka ruudussa

Hookin arvo on CSS-muuttuja. Lineaariset interpoloinnit ja aritmetiikka muuttuvat tämän muuttujan tarkoiksi calc()-lausekkeiksi, joten jokainen ruutu on yksi kirjoitus ja selain laskee loput. Äärellisen transform- ja opacity-liikkeen Animated.<tag>-elementeissä toistaa selain ilman ruutucallbackeja.

Muuta pisteiden määrää: laskuri näyttää, että React renderöi kerran muutosta kohden, ei koskaan ruutua kohden.
scope kirjoittaa arvon kerran säiliöön jokaisen elementin sijaan.
inspect(element) kertoo, mitä polkua kukin ominaisuus käyttää ja miksi.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Keskeytä se missä vain. Se jatkaa.

Uusi kohde alkaa siitä, missä elementti on näytöllä, ja jousi säilyttää myös nopeuden, joten puolivälissä tapahtuva käännös kaartuu sujuvasti pysähtymättä ensin. Hookissa määritellyt ohjaimet pysähtyvät ja vapautetaan korvattaessa ja irrotettaessa, ja palvelimella renderöity markup jatkaa animointia hydraation jälkeen.

Napsauta kahdesti nopeasti: spring-asetuksella rata kaartuu, timing-asetuksella sijainti säilyy, mutta uusi käyrä alkaa.
Pysäyttäminen jättää arvon paikalleen; mikään ei hyppää lopputilaan.
Ei unohtuneita ruutusilmukoita irrottamisen, reitinvaihdon tai piilotetun välilehden jälkeen.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Mitä voit rakentaa

Kokonaisia malleja säädettävillä asetuksilla ja koko lähdekoodilla.

Kaikki esimerkit

Rakennettu Animatedilla

Tarvitsetko valmiin komponentin? Animated Chorus.

Pyörivät numerot, siirtyvät korttikorostukset, edistyminen, sheetit ja animoidut listat, jotka liittyvät suoraan Reactiin ja React Nativeen. Nämä kolme toimivat juuri nyt tällä sivulla.

Tutustu Animated Chorus -sivustoon

Aloita kolmessa minuutissa

Asenna paketti, liikuta ensimmäistä arvoa ja valitse sitten opas edessäsi olevaan tehtävään.

npm install @kkwaenggwari/animated