Vodniki · 01

Prehodi

Vsaka komponenta sprejme en transition: krivuljo timinga ali vzmet. Kako izbrati in kaj se zgodi, ko se gibanje prekine.

Dve vrsti prehoda

Prehod je bodisi { duration, easing } bodisi { tempo: 'spring', spring }. Podajte ga propu transition katere koli komponente. Komponente, ki hkrati premikajo več stvari, sprejmejo še drug prop, na primer layoutTransition pri MotionList za elemente, ki drsijo na nove položaje.

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 }

Vzmeti s trajanjem

Vzmet običajno teče toliko časa, kolikor potrebuje njena fizika. Dodajte duration in vzmet je umerjena tako, da se umiri natanko takrat, pri čemer ohrani svoj značaj (koliko odskakuje) in se prilagodi vašemu timingu. Primerjajte krivulje timinga in vzmeti na istih treh komponentah spodaj.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Prekinitve

Vsaka komponenta začne novo gibanje od tistega, kar je na zaslonu. Vzmet ohrani tudi trenutno hitrost, zato drugi klik gibanje gladko obrne. Krivulja timinga se začne znova od trenutnega položaja s svežo krivuljo.

Števila: nova vrednost nadaljuje od znakov na zaslonu.
Višina in zamenjave: velikost nadaljuje od velikosti na zaslonu.
Seznami: elementi, ki se premikajo na nov položaj, ohranijo hitrost.

Pripravljeni prehodi

motionTokens zbira nekaj usklajenih občutkov: štiri vzmeti, štiri krivulje timinga in štiri trajanja. To so navadni objekti, zato enega razširite, da spremenite eno samo polje.

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

Imena easinga

easing sprejme linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut ali polje kubične Bézierjeve krivulje, kot je [0.22, 1, 0.36, 1].