Ghiduri · 01

Tranziții

Fiecare componentă primește un transition: o curbă timing sau un arc. Cum alegeți și ce se întâmplă când o mișcare e întreruptă.

Două tipuri de tranziție

O tranziție este fie { duration, easing }, fie { tempo: 'spring', spring }. Transmiteți-o prop-ului transition al oricărei componente. Componentele care mișcă mai multe lucruri deodată primesc un al doilea prop, cum ar fi layoutTransition la MotionList pentru elementele care alunecă spre poziții noi.

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 }

Arcuri cu durată

Un arc rulează în mod normal cât îi cere fizica. Adăugați duration, iar arcul este calibrat să se așeze exact atunci, păstrându-și caracterul (cât sare) și potrivindu-se cu timingul dumneavoastră. Comparați mai jos curbele timing și arcurile pe aceleași trei componente.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Întreruperi

Fiecare componentă pornește o mișcare nouă de la ce e pe ecran. Un arc își păstrează și viteza curentă, așa că un al doilea clic întoarce mișcarea lin. O curbă timing pornește din nou de la poziția curentă, cu o curbă nouă.

Numere: o valoare nouă continuă de la glifele de pe ecran.
Înălțime și schimbări: mărimea continuă de la mărimea de pe ecran.
Liste: elementele care se mută spre o poziție nouă își păstrează viteza.

Tranziții gata făcute

motionTokens adună câteva senzații coerente: patru arcuri, patru curbe timing și patru durate. Sunt obiecte simple, așa că faceți spread pe unul ca să schimbați un singur câmp.

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

Nume de easing

easing acceptă linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut sau un tablou Bézier cubic precum [0.22, 1, 0.36, 1].