Guider · 01

Overganger

Hver komponent tar én transition: en timingkurve eller en fjær. Hvordan du velger, og hva som skjer når en bevegelse avbrytes.

To typer overganger

En overgang er enten { duration, easing } eller { tempo: 'spring', spring }. Send den til transition-propen på en hvilken som helst komponent. Komponenter som flytter flere ting samtidig, tar en andre prop, som layoutTransition på MotionList for elementer som glir til nye posisjoner.

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ærer med varighet

En fjær varer vanligvis så lenge fysikken krever. Legg til duration, så kalibreres fjæren til å lande nøyaktig da, med beholdt karakter (hvor mye den spretter) og tilpasset timingen din. Sammenlign timingkurver og fjærer på de samme tre komponentene nedenfor.

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Avbrudd

Hver komponent starter en ny bevegelse fra det som er på skjermen. En fjær beholder også gjeldende hastighet, så et nytt klikk snur bevegelsen mykt. En timingkurve starter på nytt fra gjeldende posisjon med en ny kurve.

Tall: en ny verdi fortsetter fra glyfene på skjermen.
Høyde og bytter: størrelsen fortsetter fra størrelsen på skjermen.
Lister: elementer som flytter til en ny posisjon, beholder hastigheten.

Ferdige overganger

motionTokens samler noen få enhetlige følelser: fire fjærer, fire timingkurver og fire varigheter. Det er vanlige objekter, så spre ett for å endre ett 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-navn

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].