Guides · 01

Overgange

Hver komponent tager én transition: en timingkurve eller en fjeder. Hvordan du vælger, og hvad der sker, når en bevægelse afbrydes.

To slags overgange

En overgang er enten { duration, easing } eller { tempo: 'spring', spring }. Giv den til transition-propen på enhver komponent. Komponenter, der flytter flere ting på én gang, tager en anden prop, som layoutTransition på MotionList til elementer, der glider til nye positioner.

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 }

Fjedre med en varighed

En fjeder kører normalt så længe, dens fysik kræver. Tilføj duration, og fjederen kalibreres til at lande præcis dér, med bevaret karakter (hvor meget den hopper) og tilpasset din timing. Sammenlign timingkurver og fjedre på de samme tre komponenter nedenfor.

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Afbrydelser

Hver komponent starter en ny bevægelse fra det, der er på skærmen. En fjeder bevarer også sin aktuelle hastighed, så et andet klik vender bevægelsen blødt. En timingkurve starter forfra fra den aktuelle position med en ny kurve.

Tal: en ny værdi fortsætter fra glyfferne på skærmen.
Højde og skift: størrelsen fortsætter fra størrelsen på skærmen.
Lister: elementer, der flytter til en ny position, bevarer deres hastighed.

Færdige overgange

motionTokens samler nogle få ensartede fornemmelser: fire fjedre, fire timingkurver og fire varigheder. Det er almindelige objekter, så spred et for at ændre ét felt.

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

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