Kılavuzlar · 07

React Native'den gelenler için

Ne aynı kalır, ne değişir ve web neler ekler.

Aynı çağrılar

Denetleyiciler, grafikler ve yapılandırmalar React Native'in Animated'ını izler. React Native'in Animated.View render ettiği yerde Animated.div gibi DOM ana bilgisayarları render edin. useAnimatedValue React Native'deki gibi kullanılabilir.

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

Bilinmesi gereken farklar

Bu ayrıntılar taşınan kodun cihazdaki gibi davranmasını sağlar.

useNativeDriver ve isInteraction kabul edilir. Bunun yerine oynatma her çıktı için seçilir: uygun çıktılar tarayıcıda, geri kalanı JavaScript'te oynatılır.
spring stiffness/damping/mass, bounciness/speed ya da tension/friction kabul eder; hiçbiri verilmezse React Native'in varsayılanı kullanılır.
interpolate easing'i ve üç dış değerleme modunu destekler.
Easing React Native ile eşleşir, elastic dahil. Easing.exp, tam 0'dan başlayıp tarayıcı oynatmasını kullanabilmesi için %0,1 yeniden ölçeklenmiştir.
Decay hızı milisaniye başına birim, spring hızı ise saniye başına birimdir; React Native'deki gibi.
Animated.createAnimatedComponent ref ileten bir bileşeni sarar.

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

Web'in ekledikleri

Sıradan React style'ı hook değerlerini doğrudan kabul eder, seed/pose/respond hedefleri ve hareketleri tanımlar, Animated.Keep ve Animated.Scene ayrılışları ve düzeni yönetir.