గైడ్‌లు · 04

ఇన్‌పుట్, సంజ్ఞలు

పాయింటర్, లాగడం, స్క్రోల్, ఇతర ఇన్‌పుట్‌లను విలువలలో రాసి, ఇతర విలువలు వాటిని అనుసరించేలా చేయండి.

input(target, adapter)

ఇన్‌పుట్ అడాప్టర్ బ్రౌజర్ ఈవెంట్‌లను విలువ రాతలుగా మారుస్తుంది. input(ref, adapter) దాన్ని కంట్రోలర్‌గా జోడిస్తుంది; useAnimated లోపల ప్రకటిస్తే, అన్‌మౌంట్‌పై లేదా ఆధారం మారినప్పుడు తీసివేయబడుతుంది.

అడాప్టర్లు: dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput, swipeInput.

ఉదాహరణ సిద్ధమవుతోంది…

JavaScript ఆఫ్‌లో ఉంది. కింద ఉన్న కోడే పూర్తి ఉదాహరణ.

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

సరిహద్దులు, విడుదల మోషన్‌తో లాగడం

dragInput పాయింటర్, బాణం కీ లాగడం, elastic ప్రతిఘటనతో bounds, విడిచిన తర్వాత momentum, అంచనా స్థానం నుండి విశ్రాంతి స్థలాన్ని ఎంచుకునే settle ఫంక్షన్‌కు మద్దతు ఇస్తుంది.

టచ్ స్క్రీన్‌లపై, మౌంట్ అయి ఉన్నప్పుడు లక్ష్యం యొక్క touch-action-ను సెట్ చేస్తుంది; అందువల్ల బ్రౌజర్ సంజ్ఞను స్క్రోల్‌గా తీసుకోదు. మీరే సెట్ చేసిన విలువకు ప్రాధాన్యత.

ఉదాహరణ సిద్ధమవుతోంది…

JavaScript ఆఫ్‌లో ఉంది. కింద ఉన్న కోడే పూర్తి ఉదాహరణ.

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

Pinch, viewport, media

input యొక్క ఐచ్ఛిక మూడవ ఆర్గ్యుమెంట్ ప్రతి స్పందన ఈవెంట్‌ను పొందుతుంది; అందువల్ల అడాప్టర్ తన అంచులపై మోషన్‌ను కూడా ప్రారంభించగలదు.

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

React Native ఈవెంట్ మ్యాపింగ్‌లు DOM ఈవెంట్‌లపై పనిచేస్తాయి. scroll ఈవెంట్‌లో nativeEvent.contentOffset, contentSize, layoutMeasurement స్క్రోల్ చేసిన ఎలిమెంట్ నుండి చదవబడతాయి; అందువల్ల ScrollView మ్యాపింగ్‌లు మార్పు లేకుండా తీసుకురావచ్చు.

Header.jsx

const scrollY = useAnimatedValue(0);

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