Ghiduri · 04

Intrare și gesturi

Scrieți cursorul, tragerea, derularea și alte intrări în valori și lăsați alte valori să le urmeze.

input(target, adapter)

Un adaptor de intrare transformă evenimentele browserului în scrieri de valori. input(ref, adapter) îl atașează ca controler; declarat în useAnimated, este eliminat la demontare sau când se schimbă o dependență.

Adaptoare: dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput și swipeInput.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Tragere cu limite și mișcare la eliberare

dragInput suportă tragerea cu cursorul și cu tastele săgeți, bounds cu rezistență elastic, momentum după eliberare și o funcție settle care alege locul de oprire din poziția proiectată.

Pe ecranele tactile setează touch-action pe țintă cât e montat, ca browserul să nu preia gestul drept derulare. O valoare setată de dumneavoastră are prioritate.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Ciupire, viewport și media

Al treilea argument opțional al lui input primește fiecare eveniment de răspuns, așa că un adaptor poate porni mișcare și la marginile sale.

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

Mapările de evenimente din React Native funcționează pe evenimente DOM. La un eveniment de derulare, nativeEvent.contentOffset, contentSize și layoutMeasurement se citesc din elementul derulat, așa că mapările ScrollView se preiau neschimbate.

Header.jsx

const scrollY = useAnimatedValue(0);

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