React DOM साठी मोशन · React Native Animated API

मोशन एकदा लिहा. ते सुरळीत चालते आणि कधीही तुटत नाही.

Animated, React Native चे Animated वेबवर आणते. एक मूल्य प्रत्येक फ्रेममध्ये React रेंडर न करता कितीही एलिमेंट्स चालवते, समर्थित मोशन ब्राउझरमध्येच चालते, आणि प्रत्येक व्यत्यय स्क्रीनवर दिसणाऱ्या स्थितीपासून पुढे जातो.

सुरुवात करा उदाहरणे पाहा

इन्स्टॉलेशन

npm install @kkwaenggwari/animated

एकच घड्याळ मूल्य सर्व 64 आकारांची लाट चालवते. मंचावर पॉइंटर फिरवा.

या प्रकाशनावर मोजले

डेस्कटॉप PC वर headless Chrome मध्ये 1.0.0 build ने मोजले. आकडे उपकरणानुसार बदलतात. आम्ही कसे मोजले

0.00ms400 एलिमेंट्स हलताना प्रति फ्रेम JavaScript
Animated एलिमेंट्सवरील मर्यादित transform आणि opacity मोशन ब्राउझरमध्ये चालते. पानाचे स्वतःचे फ्रेम callback कोणतेही काम करत नाहीत.
0.13msएक मूल्य 10,000 एलिमेंट्स चालवताना प्रति फ्रेम JavaScript
मूल्य एकच CSS व्हेरिएबल लिहिते; प्रत्येक एलिमेंट त्यातून CSS मध्ये आपली शैली मिळवतो.
0मोशनदरम्यान React रेंडर
मूल्ये कधीही React state मधून जात नाहीत. फ्रेम बदलल्यावर नाही, तर तुमचे props बदलल्यावर कंपोनंट रेंडर होतात.

01 · सोपे

तुम्हाला आधीच माहीत असलेले API, साध्या React style वर

timing, spring, interpolate, loop आणि Animated.event त्यांची React Native नावे आणि कॉन्फिगरेशन राखतात. मूल्य थेट साध्या style prop मध्ये जाते, त्यामुळे पहिल्या मोशनपूर्वी शिकायचा विशेष कंपोनंट नाही.

Animated.View चे नाव Animated.div करून React Native कोड आणा.
एक मूल्य एक पट्टी, एक डायल आणि कार्डांची रांग एकाच वेळी, प्रत्येकाला स्वतःच्या श्रेणीसह, हलवू शकते.
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 व्हेरिएबल आहे. रेषीय interpolation आणि अंकगणित त्या व्हेरिएबलच्या अचूक 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 · स्थिर

कुठेही व्यत्यय आणा. ते पुढे चालू राहते.

नवीन लक्ष्य एलिमेंट स्क्रीनवर जिथे आहे तिथून सुरू होते, आणि spring आपला वेगही राखतो, त्यामुळे मध्येच दिशा बदलल्यास आधी न थांबता सुरळीत वळते. हुकमध्ये घोषित केलेले कंट्रोलर बदलताना आणि अनमाउंटवेळी थांबवून मोकळे केले जातात, आणि सर्व्हरवर रेंडर झालेला मार्कअप hydration नंतरही ॲनिमेट होत राहतो.

दोनदा पटकन क्लिक करा: spring सह मार्ग वाकतो, timing सह स्थिती राखून नवीन वक्र सुरू होतो.
थांबवल्यावर मूल्य जिथे आहे तिथेच राहते; काहीही शेवटच्या स्थितीकडे उडी घेत नाही.
अनमाउंट, route बदल किंवा लपलेल्या टॅबनंतर भटकणारी फ्रेम लूप नाहीत.

उदाहरण तयार होत आहे…

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