Gidsen · 01

Overgangen

Elk component neemt één transition: een timingcurve of een veer. Hoe je kiest, en wat er gebeurt als een beweging wordt onderbroken.

Twee soorten overgangen

Een overgang is { duration, easing } of { tempo: 'spring', spring }. Geef hem mee aan de transition-prop van elk component. Componenten die meerdere dingen tegelijk bewegen, nemen een tweede prop, zoals layoutTransition op MotionList voor items die naar een nieuwe plek glijden.

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 }

Veren met een duur

Een veer duurt normaal zo lang als zijn natuurkunde nodig heeft. Voeg duration toe en de veer wordt zo afgesteld dat hij precies dan tot rust komt, met behoud van zijn karakter (hoeveel hij verent) en passend bij jouw timing. Vergelijk hieronder timingcurves en veren op dezelfde drie componenten.

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Onderbrekingen

Elk component start een nieuwe beweging vanaf wat op het scherm staat. Een veer behoudt ook zijn huidige snelheid, dus een tweede klik keert de beweging soepel om. Een timingcurve begint opnieuw vanaf de huidige positie met een verse curve.

Getallen: een nieuwe waarde gaat verder vanaf de glyphs op het scherm.
Hoogte en wissels: de grootte gaat verder vanaf de grootte op het scherm.
Lijsten: items die naar een nieuwe plek gaan, behouden hun snelheid.

Kant-en-klare overgangen

motionTokens verzamelt een paar consistente gevoelens: vier veren, vier timingcurves en vier duren. Het zijn gewone objecten, dus spread er een om één veld te veranderen.

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

Namen van easing

easing accepteert linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut, of een kubische Bézier-array zoals [0.22, 1, 0.36, 1].