గైడ్‌లు · 01

ట్రాన్సిషన్‌లు

ప్రతి కాంపోనెంట్ ఒక transition తీసుకుంటుంది: టైమింగ్ వక్రం లేదా spring. ఎలా ఎంచుకోవాలి, మోషన్‌కు అంతరాయం కలిగినప్పుడు ఏమి జరుగుతుంది.

రెండు రకాల ట్రాన్సిషన్‌లు

ట్రాన్సిషన్ { duration, easing } లేదా { tempo: 'spring', spring }. దాన్ని ఏ కాంపోనెంట్ యొక్క transition-కైనా ఇవ్వండి. అనేకాన్ని ఒకేసారి కదిలించే కాంపోనెంట్లు రెండవదాన్ని తీసుకుంటాయి, ఉదాహరణకు కొత్త స్థానాలకు జారే అంశాల కోసం 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 }

వ్యవధి ఉన్న spring-లు

spring సాధారణంగా దాని భౌతికశాస్త్రానికి అవసరమైనంత సేపు నడుస్తుంది. duration జోడిస్తే, spring సరిగ్గా ఆ సమయానికి స్థిరపడేలా క్రమాంకనం చేయబడుతుంది; మీ టైమింగ్‌కు సరిపోతూనే దాని స్వభావాన్ని (ఎంత ఎగురుతుందో) నిలుపుకుంటుంది. కింద అవే మూడు కాంపోనెంట్లపై టైమింగ్ వక్రాలను, spring-లను పోల్చండి.

ఉదాహరణ సిద్ధమవుతోంది…

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;
}

అంతరాయాలు

ప్రతి కాంపోనెంట్ స్క్రీన్‌పై ఉన్నదాని నుండి కొత్త మోషన్‌ను ప్రారంభిస్తుంది. spring తన ప్రస్తుత వేగాన్ని కూడా నిలుపుకుంటుంది; అందువల్ల రెండవ క్లిక్ మోషన్‌ను సాఫీగా తిప్పుతుంది. టైమింగ్ వక్రం ప్రస్తుత స్థానం నుండి కొత్త వక్రంతో మళ్లీ ప్రారంభమవుతుంది.

సంఖ్యలు: కొత్త విలువ స్క్రీన్‌పై ఉన్న glyph-ల నుండి కొనసాగుతుంది.
ఎత్తు, మార్పిడులు: పరిమాణం స్క్రీన్‌పై ఉన్న పరిమాణం నుండి కొనసాగుతుంది.
జాబితాలు: కొత్త స్థానానికి కదిలే అంశాలు తమ వేగాన్ని నిలుపుకుంటాయి.

సిద్ధమైన ట్రాన్సిషన్‌లు

motionTokens కొన్ని స్థిరమైన అనుభూతులను సేకరిస్తుంది: నాలుగు spring-లు, నాలుగు టైమింగ్ వక్రాలు, నాలుగు వ్యవధులు. అవి సాధారణ ఆబ్జెక్ట్‌లు; అందువల్ల ఒక ఫీల్డ్‌ను మార్చడానికి ఒకదాన్ని 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] వంటి cubic Bézier అరేను స్వీకరిస్తుంది.