इनपुट आणि हावभाव

input(target, adapter)

इनपुट अडॅप्टर ब्राउझर इव्हेंटना मूल्य लेखनात रूपांतरित करतो. input(ref, adapter) तो कंट्रोलर म्हणून जोडतो; useAnimated मध्ये घोषित केल्यास अनमाउंटवर किंवा अवलंबित्व बदलल्यावर काढला जातो.

अडॅप्टर: dragInput, pinchInput, moveInput, scrollInput, wheelInput, viewportInput, mediaInput, longPressInput आणि swipeInput.

मर्यादा आणि सोडण्याच्या मोशनसह ओढणे

dragInput पॉइंटर आणि बाण कीने ओढणे, elastic प्रतिकारासह bounds, सोडल्यानंतर momentum, आणि अंदाजित स्थितीवरून विश्रांतीचे ठिकाण निवडणारे settle फंक्शन समर्थित करतो.

टच स्क्रीनवर तो माउंट असताना लक्ष्याचे touch-action सेट करतो, त्यामुळे ब्राउझर हावभावाला स्क्रोल समजत नाही. तुम्ही स्वतः सेट केलेले मूल्य प्राधान्य घेते.

Pinch, viewport आणि media

input चा ऐच्छिक तिसरा आर्ग्युमेंट प्रत्येक प्रतिसाद इव्हेंट मिळवतो, त्यामुळे अडॅप्टर त्याच्या कडांवर मोशनही सुरू करू शकतो.

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 मॅपिंग बदलाशिवाय आणता येतात.

const scrollY = useAnimatedValue(0);

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