गाइड · 01

Transition

हर कंपोनेंट एक transition लेता है: timing वक्र या स्प्रिंग। कैसे चुनें, और गति रुकने पर क्या होता है।

दो तरह के transition

transition या तो { duration, easing } है या { tempo: 'spring', spring }। इसे किसी भी कंपोनेंट के transition prop में दें। एक साथ कई चीज़ें हिलाने वाले कंपोनेंट दूसरा prop भी लेते हैं, जैसे नई जगह सरकते आइटम के लिए MotionList पर layoutTransition।

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 में फ़िट होता है। नीचे उन्हीं तीन कंपोनेंट पर 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 वक्र मौजूदा स्थिति से नए वक्र के साथ फिर शुरू होता है।

संख्याएँ: नया मान स्क्रीन पर दिख रहे अक्षरों से आगे बढ़ता है।
ऊँचाई और स्वैप: आकार स्क्रीन पर दिख रहे आकार से आगे बढ़ता है।
सूचियाँ: नई जगह की ओर जाते आइटम अपना वेग रखते हैं।

तैयार transition

motionTokens कुछ सुसंगत अनुभव जुटाता है: चार स्प्रिंग, चार timing वक्र और चार अवधियाँ। ये सादे ऑब्जेक्ट हैं, इसलिए एक फ़ील्ड बदलने के लिए किसी एक को spread करें।

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, या [0.22, 1, 0.36, 1] जैसा क्यूबिक Bézier ऐरे स्वीकार करता है।