গাইড · 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;
}

পিঞ্চ, ভিউপোর্ট আর মিডিয়া

input-এর ঐচ্ছিক তৃতীয় আর্গুমেন্ট প্রতিটি response ইভেন্ট পায়, তাই অ্যাডাপ্টার নিজের প্রান্তে গতিও শুরু করতে পারে।

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 ইভেন্টে কাজ করে। স্ক্রল ইভেন্টে nativeEvent.contentOffset, contentSize আর layoutMeasurement স্ক্রল হওয়া এলিমেন্ট থেকে পড়া হয়, তাই ScrollView ম্যাপিং অপরিবর্তিত চলে আসে।

Header.jsx

const scrollY = useAnimatedValue(0);

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