मार्गदर्शक · 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 आणि तीन extrapolation मोड समर्थित करते.
Easing React Native शी, elastic सह, जुळते. Easing.exp नेमके 0 वर सुरू होण्यासाठी 0.1% ने पुन्हा मोजले जाते, त्यामुळे ते ब्राउझर प्लेबॅक वापरू शकते.
React Native प्रमाणे, decay वेग प्रति मिलिसेकंद एककांमध्ये आणि spring वेग प्रति सेकंद एककांमध्ये असतो.
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 बाहेर पडणे आणि लेआउट हाताळतात.