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