React DOM के लिए गति · React Native का Animated API

गति एक बार लिखें। सहज चलती है, कभी नहीं टूटती।

Animated, React Native के Animated को वेब पर लाता है। एक मान हर फ़्रेम में React रेंडर के बिना कितने भी एलिमेंट चलाता है, समर्थित गति ख़ुद ब्राउज़र चलाता है, और हर रुकावट स्क्रीन पर दिख रही स्थिति से आगे बढ़ती है।

शुरू करें उदाहरण देखें

इंस्टॉल करें

npm install @kkwaenggwari/animated

एक घड़ी मान सभी 64 आकृतियों की लहरें चलाता है। मंच पर पॉइंटर घुमाएँ।

इस बिल्ड पर मापा गया

डेस्कटॉप PC पर हेडलेस Chrome में 1.0.0 बिल्ड से मापा गया। आँकड़े डिवाइस पर निर्भर करते हैं। हमने कैसे मापा

0.00ms400 एलिमेंट हिलते समय हर फ़्रेम का JavaScript
Animated एलिमेंट पर transform और opacity की सीमित गति ब्राउज़र चलाता है। पेज के अपने फ़्रेम callback कोई काम नहीं करते।
0.13msएक मान से 10,000 एलिमेंट चलने पर हर फ़्रेम का JavaScript
मान एक CSS वेरिएबल लिखता है; हर एलिमेंट CSS में उससे अपनी स्टाइल निकालता है।
0गति के दौरान React रेंडर
मान कभी React स्टेट से नहीं गुज़रते। कंपोनेंट तब रेंडर होते हैं जब आपके props बदलें, फ़्रेम बदलने पर नहीं।

01 · आसान

वह API जो आप पहले से जानते हैं, सामान्य React style पर

timing, spring, interpolate, loop और Animated.event React Native के नाम और कॉन्फ़िगरेशन बनाए रखते हैं। मान सीधे सामान्य style prop में जाता है, इसलिए पहली गति से पहले कोई ख़ास कंपोनेंट नहीं सीखना पड़ता।

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 रेंडर नहीं

हुक का मान एक CSS वेरिएबल है। रैखिक इंटरपोलेशन और अंकगणित उस वेरिएबल के सटीक calc() एक्सप्रेशन बन जाते हैं, इसलिए हर फ़्रेम एक लेखन है और बाक़ी ब्राउज़र गणना करता है। Animated.<tag> एलिमेंट पर transform और opacity की सीमित गति ब्राउज़र फ़्रेम callback के बिना चलाता है।

बिंदुओं की संख्या बदलें: काउंटर दिखाता है कि 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 · स्थिर

कहीं भी रोकें। वह आगे बढ़ता है।

नया लक्ष्य वहीं से शुरू होता है जहाँ एलिमेंट स्क्रीन पर है, और स्प्रिंग वेग भी बनाए रखता है, इसलिए बीच रास्ते का मोड़ पहले रुकने के बजाय सहजता से मुड़ता है। हुक में घोषित कंट्रोलर बदलने और अनमाउंट पर रुकते और छूटते हैं, और सर्वर पर रेंडर हुआ markup हाइड्रेशन के बाद एनिमेट होता रहता है।

जल्दी से दो बार क्लिक करें: 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 पर बना

तैयार कंपोनेंट चाहिए? Animated Chorus।

घूमते अंक, चलती कार्ड हाइलाइट, प्रगति, शीट और एनिमेटेड सूचियाँ, जो सीधे React और React Native में लग जाती हैं। ये तीन अभी इसी पेज पर चल रहे हैं।

Animated Chorus पर जाएँ

तीन मिनट में शुरू करें

पैकेज इंस्टॉल करें, पहला मान हिलाएँ, फिर अपने सामने के काम की गाइड चुनें।

npm install @kkwaenggwari/animated