Guides · 04

Entrées et gestes

Écrire le pointeur, le glisser, le défilement et d’autres entrées dans des valeurs, et faire suivre ces valeurs par d’autres.

input(target, adapter)

Un adaptateur d’entrée transforme les événements du navigateur en écritures de valeurs. input(ref, adapter) l’attache comme contrôleur ; déclaré dans useAnimated, il est retiré au démontage ou quand une dépendance change.

Adaptateurs : dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput et swipeInput.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Glisser avec limites et mouvement au relâchement

dragInput gère le glisser au pointeur et aux flèches du clavier, des bounds avec une résistance elastic, le momentum après relâchement et une fonction settle qui choisit le point de repos à partir de la position projetée.

Sur écran tactile, il définit le touch-action de la cible pendant qu’il est monté pour que le navigateur ne prenne pas le geste pour un défilement. Une valeur que vous définissez vous-même l’emporte.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Pincement, viewport et media queries

Le troisième argument facultatif de input reçoit chaque événement de réponse : un adaptateur peut donc aussi lancer un mouvement sur ses fronts.

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

Les mappings d’événements de React Native fonctionnent avec les événements DOM. Sur un événement de défilement, nativeEvent.contentOffset, contentSize et layoutMeasurement sont lus sur l’élément défilé : les mappings de ScrollView se portent tels quels.

Header.jsx

const scrollY = useAnimatedValue(0);

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