الأدلة · 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 قيم الخطّافات مباشرة، وتصف seed/pose/respond الوجهات والإيماءات، ويتولى Animated.Keep وAnimated.Scene المغادرات والتخطيط.