Guías · 07

Si vienes de React Native

Qué sigue igual, qué cambia y qué añade la web.

Las mismas llamadas

Los controladores, los grafos y las configuraciones siguen el Animated de React Native. Renderiza hosts DOM como Animated.div donde React Native renderiza Animated.View. useAnimatedValue está disponible como en React Native.

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

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

Diferencias que conviene conocer

Estos detalles hacen que el código portado se comporte como lo hacía en un dispositivo.

Se aceptan useNativeDriver e isInteraction. La reproducción se elige por salida: las salidas aptas se reproducen en el navegador y el resto en JavaScript.
spring acepta stiffness/damping/mass, bounciness/speed o tension/friction, con el valor por defecto de React Native si no indicas ninguno.
interpolate admite easing y los tres modos de extrapolación.
Easing coincide con React Native, incluido elastic. Easing.exp se reescala un 0,1 % para que empiece exactamente en 0 y pueda reproducirse en el navegador.
La velocidad de decay está en unidades por milisegundo y la de spring en unidades por segundo, como en React Native.
Animated.createAnimatedComponent envuelve un componente que reenvía la 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();

Lo que añade la web

El style normal de React acepta directamente valores de hook, seed/pose/respond describen destinos y gestos, y Animated.Keep y Animated.Scene se ocupan de las salidas y del layout.