ಮಾರ್ಗದರ್ಶಿಗಳು · 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 } } }])} />;