Vadovai · 07

Pereinantiems iš React Native

Kas lieka taip pat, kas keičiasi ir ką prideda žiniatinklis.

Tie patys kvietimai

Valdikliai, grafai ir konfigūracijos atitinka React Native Animated. Ten, kur React Native atvaizduoja Animated.View, atvaizduokite DOM šeimininkus, pavyzdžiui, Animated.div. useAnimatedValue prieinamas kaip React Native.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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;
}

Skirtumai, kuriuos verta žinoti

Šios detalės užtikrina, kad perkeltas kodas elgtųsi taip, kaip įrenginyje.

useNativeDriver ir isInteraction priimami. Vietoj to grojimas pasirenkamas kiekvienai išvesčiai: tinkamos išvestys grojamos naršyklėje, likusios – JavaScript.
spring priima stiffness/damping/mass, bounciness/speed arba tension/friction, o nieko nenurodžius – React Native numatytąją reikšmę.
interpolate palaiko easing ir tris ekstrapoliacijos režimus.
Easing atitinka React Native, įskaitant elastic. Easing.exp perskaičiuota 0,1 %, kad prasidėtų tiksliai nuo 0 ir galėtų naudoti naršyklės grojimą.
decay greitis matuojamas vienetais per milisekundę, o spring greitis – vienetais per sekundę, kaip React Native.
Animated.createAnimatedComponent apgaubia ref perduodantį komponentą.

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

Ką prideda žiniatinklis

Paprastas React style tiesiogiai priima hook reikšmes, seed/pose/respond apibūdina tikslus ir gestus, o Animated.Keep ir Animated.Scene tvarko išėjimus ir išdėstymą.