תנועה ל־React DOM · ה־Animated API של React Native

כותבים תנועה פעם אחת. היא חלקה, ולעולם לא נשברת.

Animated מביא את Animated של React Native לאינטרנט. ערך אחד מניע כל מספר של אלמנטים בלי רינדור React בכל פריים, תנועה נתמכת מתנגנת בדפדפן עצמו, וכל הפרעה ממשיכה ממה שעל המסך.

מתחילים לדוגמאות

התקנה

npm install @kkwaenggwari/animated

ערך שעון אחד מניע את האדווה של כל 64 הצורות. הזיזו את הסמן מעל הבמה.

נמדד בגרסה הזו

נמדד עם בניית 1.0.0 ב־Chrome ללא ממשק על PC שולחני. המספרים משתנים בין מכשירים. איך מדדנו

0.00msJavaScript לפריים בזמן ש־400 אלמנטים זזים
תנועה סופית של transform ו־opacity על אלמנטים של Animated מתנגנת בדפדפן. ה־callbacks של הפריים בעמוד לא עושים שום עבודה.
0.13msJavaScript לפריים כשערך אחד מניע 10,000 אלמנטים
הערך כותב משתנה CSS אחד; כל אלמנט גוזר ממנו את הסגנון שלו ב־CSS.
0רינדורים של React בזמן תנועה
ערכים לעולם לא עוברים דרך מצב של React. רכיבים מתרנדרים כשה־props שלכם משתנים, לא כשפריים משתנה.

01 · פשוט

ה־API שאתם כבר מכירים, על style רגיל של React

timing, spring, interpolate, loop ו־Animated.event שומרים על השמות וההגדרות של React Native. ערך נכנס ישר ל־prop רגיל של style, כך שאין רכיב מיוחד ללמוד לפני התנועה הראשונה.

העבירו קוד מ־React Native על ידי שינוי השם Animated.View ל־Animated.div.
ערך אחד יכול להזיז פס, חוגה ושורת כרטיסים בבת אחת, כל אחד עם הטווח שלו.
useAnimated מחזיק את המתכון: מתחיל בהרכבה, מתחיל מחדש כשתלות משתנה ומנקה בהסרה.

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

App.jsx

import { Easing, delay, loop, sequence, spring, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const curves = {
  linear: Easing.linear,
  inOut: Easing.inOut(Easing.cubic),
  back: Easing.out(Easing.back(1.7)),
  bounce: Easing.bounce,
};

export default function App({ tempo = 'spring', duration = 900, easing = 'inOut' }) {
  // One value. The recipe restarts when a prop changes.
  const progress = useAnimated(
    0,
    (value) => {
      const go = (toValue) =>
        tempo === 'spring'
          ? spring(value, { toValue, stiffness: 120, damping: 11 })
          : timing(value, { toValue, duration, easing: curves[easing] });
      loop(sequence([go(1), delay(500), go(0), delay(500)]));
    },
    [tempo, duration, easing],
  );

  const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '200px'] });
  const turn = progress.interpolate({ inputRange: [0, 1], outputRange: ['-90deg', '180deg'] });

  return (
    <div className="stage">
      <div className="track">
        <div className="fill" style={{ transform: `scaleX(${progress})` }} />
      </div>
      <div className="row">
        <div className="dial">
          <i style={{ transform: `rotate(${turn})` }} />
        </div>
        <div className="lane">
          <div className="puck" style={{ transform: `translateX(${x})` }} />
        </div>
      </div>
      <div className="cards">
        {[0, 1, 2, 3].map((index) => {
          const start = index * 0.15;
          const lift = progress.interpolate({
            inputRange: [start, start + 0.55],
            outputRange: ['0px', '-26px'],
            extrapolate: 'clamp',
          });
          return (
            <div key={index} className="card" style={{ transform: `translateY(${lift})` }}>
              {index + 1}
            </div>
          );
        })}
      </div>
      <p className="note">One value → 7 elements, ordinary React style</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.track {
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid #e4e6ef;
  border-radius: 50%;
}

.dial i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #8fb0ff;
  transform-origin: left center;
}

.lane {
  flex: 1 1 244px;
  max-width: 260px;
  height: 44px;
  border-radius: 999px;
  background: #f5f6fb;
}

.puck {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7cff;
}

.cards {
  display: flex;
  gap: 12px;
  padding-top: 30px;
}

.card {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

.note {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

אותן קריאות כמו ב־React Native

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

02 · מהיר

בלי רינדור React בכל פריים

ערך של hook הוא משתנה CSS. אינטרפולציות לינאריות וחשבון הופכים לביטויי calc() מדויקים של המשתנה הזה, כך שכל פריים הוא כתיבה אחת והדפדפן גוזר את השאר. תנועה סופית של transform ו־opacity על אלמנטים של Animated.<tag> מתנגנת בדפדפן בלי callbacks של פריים.

שנו את מספר הנקודות: המונה מראה ש־React רינדר פעם אחת לכל שינוי, אף פעם לא לכל פריים.
scope כותב את הערך פעם אחת על מכל במקום על כל אלמנט.
inspect(element) אומר באיזה מסלול כל מאפיין משתמש ולמה.

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

03 · יציב

הפריעו לו בכל מקום. הוא ממשיך.

יעד חדש מתחיל מהמקום שבו האלמנט נמצא על המסך, וקפיץ גם שומר על המהירות שלו, כך שהיפוך באמצע הדרך מסתובב בחלקות במקום לעצור קודם. בקרים שהוצהרו ב־hook נעצרים ומשתחררים בהחלפה ובהסרה, ו־markup שרונדר בשרת ממשיך לנוע אחרי ה־hydration.

לחצו פעמיים מהר: עם spring המסלול מתעקל, עם timing המיקום נשמר אבל מתחילה עקומה חדשה.
עצירה משאירה את הערך במקומו; שום דבר לא קופץ למצב סופי.
אין לולאות פריים יתומות אחרי הסרה, מעבר נתיב או לשונית מוסתרת.

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

App.jsx

import { useRef } from 'react';
import {
  Easing,
  spring,
  timing,
  useAnimatedListener,
  useAnimatedValueXY,
} from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tempo = 'spring', stiffness = 140, damping = 14 }) {
  const point = useAnimatedValueXY({ x: 80, y: 120 });
  const canvas = useRef(null);

  const moveTo = (event) => {
    const box = event.currentTarget.getBoundingClientRect();
    const toValue = { x: event.clientX - box.left, y: event.clientY - box.top };
    // A new target starts from where the puck is now.
    const motion =
      tempo === 'spring'
        ? spring(point, { toValue, stiffness, damping })
        : timing(point, { toValue, duration: 700, easing: Easing.inOut(Easing.cubic) });
    motion.start();
  };

  // Draw the path the puck actually travels.
  const last = useRef(null);
  useAnimatedListener(point, ({ x, y }) => {
    const context = canvas.current?.getContext('2d');
    if (!context) return;
    context.fillStyle = 'rgba(11, 20, 64, 0.025)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    if (last.current) {
      context.strokeStyle = tempo === 'spring' ? '#8fb0ff' : '#ffffff';
      context.lineWidth = 4;
      context.lineCap = 'round';
      context.beginPath();
      context.moveTo(last.current.x, last.current.y);
      context.lineTo(x, y);
      context.stroke();
    }
    last.current = { x, y };
  });

  return (
    <div className="stage">
      <div className="track" onPointerDown={moveTo}>
        <canvas ref={canvas} width={720} height={320} />
        <div
          className="puck"
          style={{
            transform: `translate(calc(${point.x} * 1px - 50%), calc(${point.y} * 1px - 50%))`,
          }}
        />
        <p>Click anywhere. Click again before it stops.</p>
      </div>
    </div>
  );
}

styles.css

.stage {
  padding: 20px;
}

.track {
  position: relative;
  height: 320px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.track canvas {
  position: absolute;
  inset: 0;
  width: 720px;
  height: 320px;
}

.puck {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2854ff;
}

.track p {
  position: absolute;
  inset: auto 16px 12px;
  margin: 0;
  color: #b8c4ef;
  font-size: 14px;
  pointer-events: none;
}

מה אפשר לבנות

תבניות שלמות עם הגדרות שניתן לכוונן וקוד מקור מלא.

כל הדוגמאות

בנוי על Animated

צריכים רכיב מוכן? Animated Chorus.

מספרים מתגלגלים, הדגשות לשוניות שנודדות, התקדמות, גיליונות ורשימות מונפשות שנכנסים ישר ל־React ול־React Native. שלושת אלה רצים בעמוד הזה ממש עכשיו.

לבקר ב־Animated Chorus

מתחילים בשלוש דקות

התקינו את החבילה, הזיזו את הערך הראשון, ואז בחרו מדריך למשימה שלפניכם.

npm install @kkwaenggwari/animated