מדריכים · 07

מגיעים מ־React Native

מה נשאר אותו דבר, מה משתנה ומה האינטרנט מוסיף.

אותן קריאות

בקרים, גרפים והגדרות עוקבים אחרי Animated של React Native. רנדרו מארחי DOM כמו Animated.div במקום שבו React Native מרנדר Animated.View. 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 ביחידות למילישנייה ומהירות קפיץ ביחידות לשנייה, כמו ב־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();

מה האינטרנט מוסיף

style רגיל של React מקבל ערכי hooks ישירות, seed/pose/respond מתארים יעדים ומחוות, ו־Animated.Keep ו־Animated.Scene מטפלים ביציאות ובפריסה.