Vodniki · 04

Vnos in geste

Zapisujte kazalec, vlečenje, drsenje in drug vnos v vrednosti, druge vrednosti pa naj jim sledijo.

input(target, adapter)

Vnosni adapter dogodke brskalnika spremeni v zapise vrednosti. input(ref, adapter) ga pripne kot krmilnik; če je deklariran v useAnimated, se odstrani ob odklopu ali ko se odvisnost spremeni.

Adapterji: dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput in swipeInput.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Vlečenje z mejami in gibanjem po spustu

dragInput podpira vlečenje s kazalcem in puščičnimi tipkami, bounds z uporom elastic, momentum po spustu in funkcijo settle, ki iz predvidenega položaja izbere mesto mirovanja.

Na zaslonih na dotik med priklopom cilju nastavi touch-action, da brskalnik geste ne prevzame za drsenje. Vrednost, ki jo nastavite sami, ima prednost.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Ščip, vidno polje in mediji

Neobvezni tretji argument input prejme vsak dogodek odziva, zato lahko adapter tudi na svojih robovih zažene gibanje.

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

Preslikave dogodkov iz React Nativa delujejo na dogodkih DOM. Pri dogodku drsenja se nativeEvent.contentOffset, contentSize in layoutMeasurement preberejo iz drsnega elementa, zato se preslikave ScrollView prenesejo nespremenjene.

Header.jsx

const scrollY = useAnimatedValue(0);

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