Hướng dẫn · 01

Chuyển tiếp

Mọi component nhận một transition: đường cong timing hoặc lò xo. Cách chọn, và chuyện gì xảy ra khi chuyển động bị ngắt.

Hai loại chuyển tiếp

Chuyển tiếp là { duration, easing } hoặc { tempo: 'spring', spring }. Truyền nó vào prop transition của bất kỳ component nào. Component di chuyển nhiều thứ cùng lúc nhận thêm một prop thứ hai, như layoutTransition trên MotionList cho các mục lướt đến vị trí mới.

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 }

Lò xo có thời lượng

Lò xo thường chạy lâu bao nhiêu tùy vật lý của nó. Thêm duration và lò xo được hiệu chỉnh để dừng đúng lúc đó, giữ nguyên tính cách (độ nảy) mà vẫn khớp với timing của bạn. So sánh đường cong timing và lò xo trên cùng ba component bên dưới.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Ngắt giữa chừng

Mọi component bắt đầu chuyển động mới từ những gì đang trên màn hình. Lò xo còn giữ vận tốc hiện tại, nên cú nhấp thứ hai đổi chiều chuyển động một cách mượt mà. Đường cong timing bắt đầu lại từ vị trí hiện tại với một đường cong mới.

Số: giá trị mới tiếp tục từ các glyph trên màn hình.
Chiều cao và hoán đổi: kích thước tiếp tục từ kích thước trên màn hình.
Danh sách: mục di chuyển đến vị trí mới vẫn giữ vận tốc.

Chuyển tiếp có sẵn

motionTokens tập hợp vài cảm giác nhất quán: bốn lò xo, bốn đường cong timing và bốn thời lượng. Chúng là đối tượng thường, nên hãy spread một cái để đổi riêng một trường.

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

Tên easing

easing nhận linear, in, out, inOut, ease, easeIn, easeOut, easeInOut, expoOut, backOut, hoặc một mảng Bézier bậc ba như [0.22, 1, 0.36, 1].