الأدلة · 01

الانتقالات

كل مكوّن يأخذ transition واحدًا: منحنى توقيت أو نابضًا. كيف تختار، وما الذي يحدث حين تُقاطَع الحركة.

نوعان من الانتقالات

الانتقال إما { duration, easing } أو { tempo: 'spring', spring }. مرّره إلى الخاصية transition في أي مكوّن. والمكوّنات التي تحرّك عدة أشياء معًا تأخذ خاصية ثانية، مثل layoutTransition في MotionList للعناصر المنزلقة إلى مواضع جديدة.

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 فيُعايَر النابض ليستقر في تلك اللحظة تمامًا، محافظًا على طابعه (مقدار ارتداده) ومتوافقًا مع توقيتك. قارن منحنيات التوقيت والنوابض على المكوّنات الثلاثة نفسها أدناه.

جارٍ تجهيز المثال…

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

المقاطعات

كل مكوّن يبدأ الحركة الجديدة مما على الشاشة. والنابض يحتفظ أيضًا بسرعته الحالية، فتعكس النقرة الثانية الحركة بسلاسة. أما منحنى التوقيت فيبدأ من جديد من الموضع الحالي بمنحنى جديد.

الأرقام: القيمة الجديدة تكمل من الرموز التي على الشاشة.
الارتفاع والتبديلات: يكمل الحجم من الحجم الذي على الشاشة.
القوائم: العناصر المنتقلة إلى موضع جديد تحتفظ بسرعتها.

انتقالات جاهزة

يجمع motionTokens بعض الأحاسيس المتّسقة: أربعة نوابض وأربعة منحنيات توقيت وأربع مدد. إنها كائنات عادية، فانشر أحدها لتغيير حقل واحد.

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].