मार्गदर्शक · 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 ॲरे स्वीकारतो.