Panduan · 01

Transisi

Setiap komponen menerima satu transition: kurva timing atau pegas. Cara memilih, dan apa yang terjadi saat gerak diinterupsi.

Dua jenis transisi

Transisi berupa { duration, easing } atau { tempo: 'spring', spring }. Berikan ke prop transition komponen mana pun. Komponen yang menggerakkan beberapa hal sekaligus menerima prop kedua, seperti layoutTransition pada MotionList untuk item yang meluncur ke posisi baru.

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 }

Pegas dengan durasi

Pegas biasanya berjalan selama yang dibutuhkan fisikanya. Tambahkan duration dan pegas dikalibrasi untuk berhenti tepat saat itu, mempertahankan karakternya (seberapa memantul) sambil menyesuaikan timing Anda. Bandingkan kurva timing dan pegas pada tiga komponen yang sama di bawah.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Interupsi

Setiap komponen memulai gerak baru dari yang ada di layar. Pegas juga mempertahankan kecepatannya saat ini, jadi klik kedua memutar balik gerak dengan mulus. Kurva timing dimulai lagi dari posisi saat ini dengan kurva baru.

Angka: nilai baru melanjutkan dari glyph di layar.
Tinggi dan pertukaran: ukuran melanjutkan dari ukuran di layar.
Daftar: item yang berpindah ke posisi baru mempertahankan kecepatannya.

Transisi siap pakai

motionTokens mengumpulkan beberapa nuansa yang konsisten: empat pegas, empat kurva timing, dan empat durasi. Semuanya objek biasa, jadi spread salah satunya untuk mengubah satu field.

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

Nama easing

easing menerima linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut, atau array Bézier kubik seperti [0.22, 1, 0.36, 1].