வழிகாட்டிகள் · 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 } } }])} />;