מדריכים · 01

מעברים

כל רכיב מקבל transition אחד: עקומת timing או קפיץ. איך לבחור, ומה קורה כשתנועה מופרעת.

שני סוגי מעברים

מעבר הוא { duration, easing } או { tempo: 'spring', spring }. העבירו אותו ל־prop transition של כל רכיב. רכיבים שמזיזים כמה דברים בבת אחת מקבלים prop שני, כמו layoutTransition ב־MotionList לפריטים שגולשים למיקומים חדשים.

transitions.js

// Timing: a duration and a curve.
{ duration: 300, easing: 'easeOut' }
{ duration: 600, easing: [0.22, 1, 0.36, 1] }

// Spring: physics that keeps its speed when interrupted.
{ tempo: 'spring', spring: { stiffness: 260, damping: 12 } }

// Spring with duration: calibrated to settle exactly then.
{ tempo: 'spring', spring: { stiffness: 260, damping: 12 }, duration: 500 }

קפיצים עם משך

קפיץ בדרך כלל רץ כמה שהפיזיקה שלו צריכה. הוסיפו duration והקפיץ מכויל להתייצב בדיוק אז, תוך שמירה על האופי שלו (כמה הוא קופץ) והתאמה לתזמון שלכם. השוו עקומות timing וקפיצים על אותם שלושה רכיבים שלמטה.

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

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

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionNumber,
  ProgressBar,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const stops = [
  { id: 'low', label: 'Low', value: 12 },
  { id: 'mid', label: 'Mid', value: 58 },
  { id: 'high', label: 'High', value: 96 },
];

export default function App({
  tempo = 'spring',
  spring = 'basic',
  easing = 'expoOut',
  duration = 600,
}) {
  const [stop, setStop] = useState('mid');
  const value = stops.find((item) => item.id === stop).value;

  // One transition object drives all three components.
  const transition =
    tempo === 'spring'
      ? { ...motionTokens.spring[spring], duration: duration || undefined }
      : { ...motionTokens.easing[easing], duration };

  return (
    <div className="lab">
      <MotionHighlight
        items={stops}
        value={stop}
        onValueChange={setStop}
        transition={transition}
        className="stops"
        itemClassName="stop"
        highlightClassName="stop-on"
      />
      <MotionNumber className="value" value={value} suffix="%" transition={transition} />
      <ProgressBar
        value={value}
        thickness={12}
        color="#176b52"
        trackColor="#eaf6f0"
        transition={transition}
        className="bar"
      />
      <p className="hint">
        Click another stop before the motion ends: it turns around from where it is.
      </p>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 20px;
}

.stops {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.stop {
  min-width: 72px;
  min-height: 42px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.stop-on {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.value {
  font:
    800 64px/1 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.bar {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

הפרעות

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

מספרים: ערך חדש ממשיך מהגליפים שעל המסך.
גובה והחלפות: הגודל ממשיך מהגודל שעל המסך.
רשימות: פריטים שעוברים למיקום חדש שומרים על המהירות שלהם.

מעברים מוכנים

motionTokens אוסף כמה תחושות עקביות: ארבעה קפיצים, ארבע עקומות timing וארבעה משכים. אלה אובייקטים רגילים, אז פרשו אחד כדי לשנות שדה אחד.

tokens.js

import { motionTokens } from '@kkwaenggwari/animated-chorus';

motionTokens.spring.quick; // snappy UI feedback
motionTokens.spring.basic; // the default feel
motionTokens.spring.gentle; // panels and height
motionTokens.spring.bouncy; // playful numbers
motionTokens.easing.expoOut; // { duration: 420, easing: 'expoOut' }
motionTokens.duration.fast; // 140

שמות easing

easing מקבל linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut, או מערך Bézier קובי כמו [0.22, 1, 0.36, 1].