गाइड · 07

React Native से आ रहे हैं

क्या वही रहता है, क्या बदलता है और वेब क्या जोड़ता है।

वही कॉल

कंट्रोलर, ग्राफ़ और कॉन्फ़िगरेशन React Native के Animated का पालन करते हैं। जहाँ React Native Animated.View रेंडर करता है, वहाँ Animated.div जैसे DOM होस्ट रेंडर करें। useAnimatedValue React Native की तरह उपलब्ध है।

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

App.jsx

import { useEffect } from 'react';
import { Animated, Easing, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

// The same calls as React Native. Animated.View becomes Animated.div.
export default function App({ duration = 1200 }) {
  const spin = useAnimatedValue(0);
  const pulse = useAnimatedValue(0);
  const scrollY = useAnimatedValue(0);

  useEffect(() => {
    const animation = Animated.parallel([
      Animated.loop(
        Animated.timing(spin, {
          toValue: 1,
          duration,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
      ),
      Animated.loop(
        Animated.sequence([
          Animated.timing(pulse, { toValue: 1, duration: duration / 2, useNativeDriver: true }),
          Animated.timing(pulse, { toValue: 0, duration: duration / 2, useNativeDriver: true }),
        ]),
      ),
    ]);
    animation.start();
    return () => animation.stop();
  }, [duration]);

  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
  const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.25] });
  const headerScale = scrollY.interpolate({
    inputRange: [0, 120],
    outputRange: [1, 0.6],
    extrapolate: 'clamp',
  });

  return (
    <div className="stage">
      <div className="row">
        <Animated.div className="spinner" style={{ transform: [{ rotate }] }} />
        <Animated.div className="dot" style={{ transform: [{ scale }] }} />
      </div>
      <div
        className="scroll"
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
          useNativeDriver: false,
        })}
      >
        <Animated.div className="header" style={{ transform: [{ scale: headerScale }] }}>
          Scroll this list
        </Animated.div>
        {Array.from({ length: 12 }, (_, index) => (
          <div key={index} className="item">
            Row {index + 1}
          </div>
        ))}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.spinner {
  width: 56px;
  height: 56px;
  border: 6px solid #eef2ff;
  border-top-color: #2854ff;
  border-radius: 50%;
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5c7cff;
}

.scroll {
  height: 220px;
  max-width: 420px;
  border: 1px solid #e4e6ef;
  border-radius: 16px;
  overflow-y: auto;
}

.header {
  position: sticky;
  top: 0;
  padding: 18px;
  background: #2854ff;
  color: #fff;
  font-weight: 700;
  transform-origin: left top;
}

.item {
  padding: 14px 18px;
  border-top: 1px solid #f0f1f7;
}

जानने लायक अंतर

ये बारीकियाँ लाए गए कोड को वैसा ही चलाती हैं जैसा वह डिवाइस पर चलता था।

useNativeDriver और isInteraction स्वीकार किए जाते हैं। इसके बजाय प्लेबैक हर आउटपुट के लिए चुना जाता है: योग्य आउटपुट ब्राउज़र में चलते हैं, बाक़ी JavaScript में।
spring stiffness/damping/mass, bounciness/speed या tension/friction लेता है, और कुछ न देने पर React Native का डिफ़ॉल्ट।
interpolate easing और तीनों एक्सट्रापोलेशन मोड समर्थित करता है।
Easing React Native से मेल खाता है, elastic सहित। Easing.exp को 0.1% से पुनः मापा गया है ताकि वह ठीक 0 से शुरू हो और ब्राउज़र प्लेबैक इस्तेमाल कर सके।
decay का वेग इकाई प्रति मिलीसेकंड में और spring का वेग इकाई प्रति सेकंड में है, React Native की तरह।
Animated.createAnimatedComponent ref आगे भेजने वाले कंपोनेंट को लपेटता है।

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();

वेब क्या जोड़ता है

सामान्य React style हुक के मान सीधे स्वीकार करता है, seed/pose/respond लक्ष्य और जेस्चर बताते हैं, और Animated.Keep व Animated.Scene प्रस्थान और लेआउट संभालते हैं।