Vadovai · 01

Perėjimai

Kiekvienas komponentas priima vieną transition: timing kreivę arba spyruoklę. Kaip pasirinkti ir kas nutinka, kai judesys pertraukiamas.

Dvi perėjimų rūšys

Perėjimas yra arba { duration, easing }, arba { tempo: 'spring', spring }. Perduokite jį bet kurio komponento transition prop. Kelis dalykus vienu metu judinantys komponentai priima antrą prop, pavyzdžiui, layoutTransition ant MotionList elementams, slystantiems į naujas vietas.

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 }

Spyruoklės su trukme

Spyruoklė paprastai veikia tiek, kiek reikia jos fizikai. Pridėkite duration, ir spyruoklė bus sukalibruota nusistovėti tiksliai tada, išlaikant charakterį (kiek ji atšoka) ir derant prie jūsų timing. Palyginkite timing kreives ir spyruokles tuose pačiuose trijuose komponentuose žemiau.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Pertraukimai

Kiekvienas komponentas naują judesį pradeda nuo to, kas yra ekrane. Spyruoklė išlaiko ir dabartinį greitį, todėl antras spustelėjimas sklandžiai apsuka judesį. Timing kreivė vėl prasideda nuo dabartinės padėties su nauja kreive.

Skaičiai: nauja reikšmė tęsiasi nuo glifų ekrane.
Aukštis ir keitimai: dydis tęsiasi nuo dydžio ekrane.
Sąrašai: į naują vietą judantys elementai išlaiko greitį.

Paruošti perėjimai

motionTokens surenka kelis nuoseklius pojūčius: keturias spyruokles, keturias timing kreives ir keturias trukmes. Tai paprasti objektai, todėl išskleiskite vieną, kad pakeistumėte vieną lauką.

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 pavadinimai

easing priima linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut arba kubinės Bézier kreivės masyvą, pavyzdžiui, [0.22, 1, 0.36, 1].