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