Guide · 01

Transizioni

Ogni componente accetta una transition: una curva di timing o una molla. Come scegliere, e che cosa succede quando un movimento viene interrotto.

Due tipi di transizione

Una transizione è { duration, easing } oppure { tempo: 'spring', spring }. Passala alla prop transition di qualsiasi componente. I componenti che muovono più cose insieme accettano una seconda prop, come layoutTransition su MotionList per gli elementi che scivolano nelle nuove posizioni.

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 }

Molle con una durata

Una molla di solito dura quanto richiede la sua fisica. Aggiungi duration e la molla viene calibrata per assestarsi esattamente in quel momento, conservando il suo carattere (quanto rimbalza) e rispettando il tuo timing. Qui sotto puoi confrontare curve di timing e molle sugli stessi tre componenti.

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

Interruzioni

Ogni componente avvia un nuovo movimento da ciò che è sullo schermo. Una molla conserva anche la velocità attuale, così un secondo clic inverte il movimento in modo fluido. Una curva di timing riparte dalla posizione attuale con una curva nuova.

Numeri: un nuovo valore prosegue dai glifi sullo schermo.
Altezza e scambi: la dimensione prosegue da quella sullo schermo.
Liste: gli elementi che si spostano in una nuova posizione conservano la loro velocità.

Transizioni pronte

motionTokens raccoglie alcune sensazioni coerenti: quattro molle, quattro curve di timing e quattro durate. Sono oggetti semplici, quindi espandine uno per cambiare un solo campo.

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

Nomi di easing

easing accetta linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut, oppure un array di Bézier cubica come [0.22, 1, 0.36, 1].