Οδηγοί · 01

Μεταβάσεις

Κάθε component δέχεται ένα transition: μια καμπύλη timing ή ένα ελατήριο. Πώς να επιλέξετε, και τι συμβαίνει όταν μια κίνηση διακόπτεται.

Δύο είδη μετάβασης

Μια μετάβαση είναι είτε { duration, easing } είτε { tempo: 'spring', spring }. Δώστε την στο prop transition οποιουδήποτε component. Τα components που κινούν πολλά πράγματα ταυτόχρονα δέχονται ένα δεύτερο prop, όπως το layoutTransition στο MotionList για στοιχεία που γλιστρούν σε νέες θέσεις.

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 }

Ελατήρια με διάρκεια

Ένα ελατήριο κανονικά τρέχει όσο χρειάζεται η φυσική του. Προσθέστε duration και το ελατήριο βαθμονομείται ώστε να ηρεμεί ακριβώς τότε, κρατώντας τον χαρακτήρα του (πόσο αναπηδά) και ταιριάζοντας στο timing σας. Συγκρίνετε καμπύλες timing και ελατήρια στα ίδια τρία components παρακάτω.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Διακοπές

Κάθε component ξεκινά νέα κίνηση από ό,τι φαίνεται στην οθόνη. Ένα ελατήριο κρατά επίσης την τρέχουσα ταχύτητά του, οπότε ένα δεύτερο κλικ αναστρέφει την κίνηση ομαλά. Μια καμπύλη timing ξεκινά ξανά από την τρέχουσα θέση με νέα καμπύλη.

Αριθμοί: μια νέα τιμή συνεχίζει από τις γλυφές στην οθόνη.
Ύψος και εναλλαγές: το μέγεθος συνεχίζει από το μέγεθος στην οθόνη.
Λίστες: τα στοιχεία που μετακινούνται σε νέα θέση κρατούν την ταχύτητά τους.

Έτοιμες μεταβάσεις

Το motionTokens συγκεντρώνει μερικές συνεπείς αισθήσεις: τέσσερα ελατήρια, τέσσερις καμπύλες timing και τέσσερις διάρκειες. Είναι απλά αντικείμενα, οπότε κάντε spread σε ένα για να αλλάξετε ένα μόνο πεδίο.

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

Το easing δέχεται linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut ή έναν πίνακα κυβικής Bézier όπως [0.22, 1, 0.36, 1].