ಮಾರ್ಗದರ್ಶಿಗಳು · 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 ಅರೇ ಸ್ವೀಕರಿಸುತ್ತದೆ.