Hướng dẫn · 04

Đầu vào và cử chỉ

Ghi con trỏ, kéo, cuộn và các đầu vào khác vào giá trị, rồi để các giá trị khác bám theo.

input(target, adapter)

Adapter đầu vào biến sự kiện trình duyệt thành các lần ghi giá trị. input(ref, adapter) gắn nó như một bộ điều khiển; khi khai báo trong useAnimated, nó được gỡ khi unmount hoặc khi phụ thuộc thay đổi.

Các adapter: dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput và swipeInput.

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

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

App.jsx

import { useRef } from 'react';
import { follow, input, moveInput, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tilt = 14, stiffness = 180, damping = 18 }) {
  const card = useRef(null);

  // Pointer position in [-1, 1]; back to 0 when the pointer leaves.
  const pointer = useAnimated(
    { x: 0, y: 0 },
    (point) => {
      input(card, moveInput({ x: point.x, y: point.y, relative: true, reset: true }));
    },
    [],
  );

  // A spring that chases the pointer.
  const depth = useAnimated(
    { x: 0, y: 0 },
    (point) => {
      follow(point, pointer, { stiffness, damping });
    },
    [pointer, stiffness, damping],
  );

  const rotateX = depth.y.interpolate({
    inputRange: [-1, 1],
    outputRange: [`${tilt}deg`, `${-tilt}deg`],
  });
  const rotateY = depth.x.interpolate({
    inputRange: [-1, 1],
    outputRange: [`${-tilt}deg`, `${tilt}deg`],
  });
  const shine = depth.x.interpolate({ inputRange: [-1, 1], outputRange: ['-40px', '40px'] });

  return (
    <div className="stage">
      <div
        ref={card}
        className="card"
        style={{ transform: `perspective(700px) rotateX(${rotateX}) rotateY(${rotateY})` }}
      >
        <span className="orb" style={{ transform: `translateX(${shine})` }} />
        <strong>Move across the card</strong>
        <small>moveInput → follow → interpolate</small>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 28px;
}

.card {
  position: relative;
  display: grid;
  align-content: end;
  gap: 6px;
  width: min(100%, 340px);
  height: 220px;
  padding: 24px;
  border-radius: 24px;
  background: #2854ff;
  color: #fff;
  overflow: hidden;
}

.orb {
  position: absolute;
  top: 28px;
  right: 40px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #5c7cff;
}

.card strong {
  position: relative;
  font-size: 20px;
}

.card small {
  position: relative;
  color: #d6e0ff;
  font:
    13px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}

Kéo có giới hạn và chuyển động sau khi thả

dragInput hỗ trợ kéo bằng con trỏ và phím mũi tên, bounds với lực cản elastic, momentum sau khi thả và một hàm settle chọn nơi dừng từ vị trí dự kiến.

Trên màn hình cảm ứng, nó đặt touch-action của đích trong khi được gắn để trình duyệt không coi cử chỉ là cuộn. Giá trị bạn tự đặt sẽ được ưu tiên.

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

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

App.jsx

import { useRef } from 'react';
import { dragInput, input, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const width = 260;
const height = 150;

export default function App({ elastic = 0.35, momentum = true, snap = false }) {
  const chip = useRef(null);

  const position = useAnimated(
    { x: 0, y: 0 },
    (point) => {
      input(
        chip,
        dragInput({
          x: point.x,
          y: point.y,
          bounds: { left: 0, right: width, top: 0, bottom: height },
          elastic,
          momentum,
          settle: snap
            ? ({ projected }) => ({
                x: projected.x < width / 2 ? 0 : width,
                y: projected.y < height / 2 ? 0 : height,
              })
            : undefined,
        }),
      );
    },
    [elastic, momentum, snap],
  );

  return (
    <div className="stage">
      <div className="area">
        <div
          ref={chip}
          tabIndex={0}
          className="chip"
          style={{
            transform: `translate(calc(${position.x} * 1px), calc(${position.y} * 1px))`,
          }}
        >
          Drag me
        </div>
      </div>
      <p>Pointer or arrow keys. Throw it past the edge.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px;
}

.area {
  width: 380px;
  max-width: 100%;
  height: 210px;
  padding: 0;
  border: 2px dashed #c5d2ff;
  border-radius: 20px;
}

.chip {
  display: grid;
  place-items: center;
  width: 120px;
  height: 60px;
  border-radius: 16px;
  background: #2854ff;
  color: #fff;
  font-weight: 650;
  cursor: grab;
  user-select: none;
}

.chip:focus-visible {
  outline: 3px solid #5c7cff;
  outline-offset: 3px;
}

.stage p {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

Chụm, khung nhìn và media

Đối số thứ ba tùy chọn của input nhận mọi sự kiện phản hồi, nên adapter cũng có thể khởi động chuyển động ở các mép của nó.

inputs.jsx

const card = useRef(null);

const pinch = useAnimated(
  { scale: 1, rotation: 0 },
  (value) => {
    input(card, pinchInput({ scale: value.scale, rotation: value.rotation, minScale: 0.5 }));
  },
  [],
);

const reveal = useAnimated(
  0,
  (value) => {
    input(card, viewportInput({ once: true }), (event) => {
      if (event.phase === 'in') spring(value, { toValue: 1 }).start();
    });
  },
  [],
);

Animated.event

Ánh xạ sự kiện của React Native hoạt động trên sự kiện DOM. Với sự kiện cuộn, nativeEvent.contentOffset, contentSize và layoutMeasurement được đọc từ phần tử đang cuộn, nên ánh xạ ScrollView dùng lại nguyên vẹn.

Header.jsx

const scrollY = useAnimatedValue(0);

<div onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }])} />;