Οδηγοί · 07

Έρχεστε από το React Native

Τι μένει ίδιο, τι αλλάζει και τι προσθέτει το web.

Οι ίδιες κλήσεις

Οι ελεγκτές, οι γράφοι και οι ρυθμίσεις ακολουθούν το Animated του React Native. Αποδώστε hosts 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 είναι σε μονάδες ανά χιλιοστό του δευτερολέπτου και η ταχύτητα του spring σε μονάδες ανά δευτερόλεπτο, όπως στο React Native.
Το Animated.createAnimatedComponent τυλίγει ένα component που προωθεί 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();

Τι προσθέτει το web

Το απλό style του React δέχεται απευθείας τιμές hooks, τα seed/pose/respond περιγράφουν προορισμούς και χειρονομίες, και τα Animated.Keep και Animated.Scene χειρίζονται αποχωρήσεις και διάταξη.