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-இல் தன் style-ஐப் பெறுகிறது.
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.

உருளும் எண்கள், நகரும் தாவல் சிறப்பம்சங்கள், முன்னேற்றம், sheet-கள், அனிமேட் ஆகும் பட்டியல்கள் — React, React Native-இல் நேரடியாகப் பொருந்துகின்றன. இவற்றில் மூன்று இப்போது இந்தப் பக்கத்தில் இயங்குகின்றன.

Animated Chorus-ஐப் பாருங்கள்

மூன்று நிமிடங்களில் தொடங்குங்கள்

தொகுப்பை நிறுவி, முதல் மதிப்பை நகர்த்தி, உங்கள் முன் உள்ள பணிக்கான வழிகாட்டியைத் தேர்ந்தெடுங்கள்.

npm install @kkwaenggwari/animated