ಮಾರ್ಗದರ್ಶಿಗಳು · 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 ನಿರ್ಗಮನ ಮತ್ತು ಲೇಔಟ್ ನಿರ್ವಹಿಸುತ್ತವೆ.