Guides · 01

Übergänge

Jede Komponente nimmt eine transition: eine Timing-Kurve oder eine Feder. Wie du wählst und was passiert, wenn eine Bewegung unterbrochen wird.

Zwei Arten von Übergängen

Ein Übergang ist entweder { duration, easing } oder { tempo: 'spring', spring }. Übergib ihn der Prop transition einer beliebigen Komponente. Komponenten, die mehrere Dinge gleichzeitig bewegen, nehmen eine zweite Prop, etwa layoutTransition bei MotionList für Elemente, die an neue Positionen gleiten.

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 }

Federn mit Dauer

Eine Feder läuft normalerweise so lange, wie ihre Physik es braucht. Mit duration wird die Feder so kalibriert, dass sie genau dann zur Ruhe kommt – sie behält ihren Charakter (wie stark sie federt) und passt trotzdem in dein Timing. Vergleiche Timing-Kurven und Federn an denselben drei Komponenten unten.

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Unterbrechungen

Jede Komponente startet eine neue Bewegung bei dem, was auf dem Bildschirm ist. Eine Feder behält zusätzlich ihre aktuelle Geschwindigkeit, sodass ein zweiter Klick die Bewegung weich umkehrt. Eine Timing-Kurve startet ab der aktuellen Position mit einer neuen Kurve.

Zahlen: Ein neuer Wert setzt bei den Glyphen auf dem Bildschirm an.
Höhe und Wechsel: Die Größe setzt bei der Größe auf dem Bildschirm an.
Listen: Elemente, die an eine neue Position wandern, behalten ihre Geschwindigkeit.

Fertige Übergänge

motionTokens sammelt ein paar stimmige Bewegungsgefühle: vier Federn, vier Timing-Kurven und vier Dauern. Es sind einfache Objekte, du kannst also eines spreaden, um ein einzelnes Feld zu ändern.

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-Namen

easing akzeptiert linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut oder ein kubisches Bézier-Array wie [0.22, 1, 0.36, 1].