คู่มือ · 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 และโหมด extrapolation ทั้งสามแบบ
Easing ตรงกับ React Native รวมถึง elastic Easing.exp ถูกปรับสเกลใหม่ 0.1% ให้เริ่มที่ 0 พอดี จึงใช้การเล่นของเบราว์เซอร์ได้
ความเร็วของ decay เป็นหน่วยต่อมิลลิวินาที และความเร็วของ spring เป็นหน่วยต่อวินาที เหมือนใน 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 รับค่าจาก hook ได้โดยตรง seed/pose/respond อธิบายปลายทางและท่าทาง และ Animated.Keep กับ Animated.Scene จัดการการออกและเลย์เอาต์