গাইড · 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 অ্যারে।