Κίνηση για React DOM · Το Animated API του React Native

Γράψτε την κίνηση μία φορά. Τρέχει ομαλά, δεν σπάει ποτέ.

Το Animated φέρνει το Animated του React Native στο web. Μία τιμή οδηγεί όσα στοιχεία θέλετε χωρίς απόδοση React σε κάθε καρέ, η υποστηριζόμενη κίνηση παίζεται από το ίδιο το πρόγραμμα περιήγησης και κάθε διακοπή συνεχίζει από ό,τι φαίνεται στην οθόνη.

Ξεκινήστε Δείτε παραδείγματα

Εγκατάσταση

npm install @kkwaenggwari/animated

Μία τιμή ρολογιού οδηγεί τα κύματα και των 64 σχημάτων. Μετακινήστε τον δείκτη πάνω από τη σκηνή.

Μετρημένο σε αυτή την έκδοση

Μετρημένο με το build 1.0.0 σε headless Chrome σε επιτραπέζιο PC. Οι αριθμοί εξαρτώνται από τη συσκευή. Πώς μετρήσαμε

0.00msJavaScript ανά καρέ ενώ κινούνται 400 στοιχεία
Η πεπερασμένη κίνηση transform και opacity στα στοιχεία Animated παίζεται από το πρόγραμμα περιήγησης. Τα callbacks καρέ της σελίδας δεν κάνουν καμία δουλειά.
0.13msJavaScript ανά καρέ όταν μία τιμή οδηγεί 10.000 στοιχεία
Η τιμή γράφει μία μεταβλητή CSS· κάθε στοιχείο παράγει από αυτήν το δικό του στυλ στο CSS.
0Αποδόσεις React κατά την κίνηση
Οι τιμές δεν περνούν ποτέ από την κατάσταση του React. Τα components αποδίδονται όταν αλλάζουν τα props σας, όχι όταν αλλάζει το καρέ.

01 · Απλό

Το API που ήδη ξέρετε, σε απλό style του React

Τα timing, spring, interpolate, loop και Animated.event κρατούν τα ονόματα και τις ρυθμίσεις του React Native. Η τιμή μπαίνει κατευθείαν στο απλό prop style, οπότε δεν χρειάζεται να μάθετε κάποιο ειδικό component πριν από την πρώτη κίνηση.

Μεταφέρετε κώδικα από το React Native μετονομάζοντας το Animated.View σε Animated.div.
Μία τιμή μπορεί να κινεί ταυτόχρονα μια ταινία, έναν δίσκο και μια σειρά καρτών, το καθένα με το δικό του εύρος.
Το useAnimated κατέχει τη συνταγή: ξεκινά κατά την προσάρτηση, ξαναξεκινά όταν αλλάζει μια εξάρτηση και καθαρίζει κατά την αποπροσάρτηση.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Οι ίδιες κλήσεις με το 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 · Γρήγορο

Χωρίς απόδοση React σε κάθε καρέ

Η τιμή ενός hook είναι μεταβλητή CSS. Οι γραμμικές παρεμβολές και η αριθμητική γίνονται ακριβείς εκφράσεις calc() αυτής της μεταβλητής, οπότε κάθε καρέ είναι μία εγγραφή και τα υπόλοιπα τα υπολογίζει το πρόγραμμα περιήγησης. Η πεπερασμένη κίνηση transform και opacity στα στοιχεία Animated.<tag> παίζεται από το πρόγραμμα περιήγησης χωρίς callbacks καρέ.

Αλλάξτε τον αριθμό των κουκκίδων: ο μετρητής δείχνει ότι το React απέδωσε μία φορά ανά αλλαγή, ποτέ ανά καρέ.
Το scope γράφει την τιμή μία φορά στο κοντέινερ αντί για κάθε στοιχείο.
Το inspect(element) λέει ποια διαδρομή χρησιμοποιεί κάθε ιδιότητα και γιατί.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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 · Σταθερό

Διακόψτε το οπουδήποτε. Συνεχίζει.

Ένας νέος στόχος ξεκινά από εκεί που βρίσκεται το στοιχείο στην οθόνη, και ένα ελατήριο κρατά και την ταχύτητα, οπότε μια αναστροφή στη μέση της διαδρομής καμπυλώνει ομαλά αντί να σταματήσει πρώτα. Οι ελεγκτές που δηλώνονται σε ένα hook σταματούν και απελευθερώνονται κατά την αντικατάσταση και την αποπροσάρτηση, και το markup που αποδόθηκε στον διακομιστή συνεχίζει να κινείται μετά το hydration.

Κάντε κλικ δύο φορές γρήγορα: με spring η τροχιά καμπυλώνει, με timing η θέση κρατιέται αλλά ξεκινά νέα καμπύλη.
Η διακοπή αφήνει την τιμή εκεί που είναι· τίποτα δεν πηδά στην τελική κατάσταση.
Κανένας ξεχασμένος βρόχος καρέ μετά από αποπροσάρτηση, αλλαγή διαδρομής ή κρυφή καρτέλα.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Τι μπορείτε να φτιάξετε

Πλήρη μοτίβα με ρυθμιζόμενες επιλογές και ολόκληρο τον κώδικα πηγής.

Όλα τα παραδείγματα

Χτισμένο με Animated

Χρειάζεστε έτοιμο component; Animated Chorus.

Αριθμοί που κυλούν, επισημάνσεις καρτών που ταξιδεύουν, πρόοδος, sheets και κινούμενες λίστες που μπαίνουν απευθείας σε React και React Native. Αυτά τα τρία τρέχουν τώρα σε αυτή τη σελίδα.

Επισκεφθείτε το Animated Chorus

Ξεκινήστε σε τρία λεπτά

Εγκαταστήστε το πακέτο, κινήστε μια πρώτη τιμή και μετά επιλέξτε οδηγό για την εργασία που έχετε μπροστά σας.

npm install @kkwaenggwari/animated