Guider · 01

Övergångar

Varje komponent tar en transition: en timingkurva eller en fjäder. Hur du väljer, och vad som händer när en rörelse avbryts.

Två sorters övergångar

En övergång är antingen { duration, easing } eller { tempo: 'spring', spring }. Skicka den till transition-propen på valfri komponent. Komponenter som flyttar flera saker samtidigt tar en andra prop, som layoutTransition på MotionList för objekt som glider till nya platser.

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 }

Fjädrar med en varaktighet

En fjäder pågår normalt så länge dess fysik kräver. Lägg till duration så kalibreras fjädern att landa exakt då, med bibehållen karaktär (hur mycket den studsar) och anpassad till din timing. Jämför timingkurvor och fjädrar på samma tre komponenter nedan.

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Avbrott

Varje komponent startar en ny rörelse från det som syns på skärmen. En fjäder behåller dessutom sin aktuella hastighet, så ett andra klick vänder rörelsen mjukt. En timingkurva börjar om från den aktuella positionen med en ny kurva.

Siffror: ett nytt värde fortsätter från glyferna på skärmen.
Höjd och byten: storleken fortsätter från storleken på skärmen.
Listor: objekt som flyttar till en ny plats behåller sin hastighet.

Färdiga övergångar

motionTokens samlar några enhetliga känslor: fyra fjädrar, fyra timingkurvor och fyra varaktigheter. De är vanliga objekt, så sprid ett för att ändra ett enda fält.

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

Namn på easing

easing tar linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut eller en kubisk Bézier-array som [0.22, 1, 0.36, 1].