Value
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation और resetAnimation वाली बदलने योग्य संख्या।
API संदर्भ
@kkwaenggwari/animated का हर एक्सपोर्ट, उसके सिग्नेचर और उसे समझाने वाली गाइड के साथ।
मान और ग्राफ़
ValueXY
new ValueXY({ x?, y? })वही ऑपरेशन वाले x और y मानों की जोड़ी, साथ में getLayout और getTranslateTransform।
createValue
createValue(initial: number | Record<string, number>)React के बाहर संख्या या नामित संख्यात्मक रिकॉर्ड बनाएँ। बनाने से कुछ शुरू नहीं होता।
गाइड: मान और स्टाइलAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)हर मान और ग्राफ़ का सिर्फ़-पढ़ने वाला आधार: getValue, interpolate और listener।
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })इनपुट से आउटपुट सीमाओं तक जीवित मैपिंग, easing और extend, clamp या identity एक्सट्रापोलेशन के साथ।
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);एक या अधिक इनपुट पर शुद्ध, सिर्फ़-पढ़ने वाली गणना। इसे इस्तेमाल करने वाले आउटपुट JavaScript में चलते हैं।
गाइड: मान और स्टाइलinterpolateFn
interpolateFn({ value, inputRange, outputRange });सामान्य संख्या के लिए इंटरपोलेशन एक बार निकालें।
गाइड: मान और स्टाइलadd
add(...inputs);संख्याओं और मानों का योग।
गाइड: मान और स्टाइलsubtract
subtract(a, b);दो इनपुट का अंतर।
गाइड: मान और स्टाइलmultiply
multiply(...inputs);संख्याओं और मानों का गुणनफल।
गाइड: मान और स्टाइलdivide
divide(a, b);दो इनपुट का भागफल।
गाइड: मान और स्टाइलmodulo
modulo(a, b);लिपटा हुआ मान, जैसे अंतहीन घुमाव के लिए।
गाइड: मान और स्टाइलdiffClamp
diffClamp(input, min, max);इनपुट के बदलावों का पालन करता है पर एक सीमा में रहता है; स्क्रॉल पर छिपने वाले हेडर के लिए उपयोगी।
गाइड: मान और स्टाइलReact हुक
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)कंपोनेंट के जीवनकाल तक संख्या या संख्यात्मक रिकॉर्ड का मालिक बनें। style में यह CSS वेरिएबल है।
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)मान और उसकी factory में घोषित हर कंट्रोलर, इनपुट और आउटपुट का मालिक बनें। शुरू करता है, निर्भरता बदलने पर फिर शुरू करता है और सफ़ाई करता है।
गाइड: मान और स्टाइलuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)पूरे द्वि-आयामी मान का मालिक बनें।
गाइड: मान और स्टाइलuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringजो व्युत्पन्न नोड calc() एक्सप्रेशन नहीं है, उसे कंपोनेंट के जीवनकाल वाला अपना CSS वेरिएबल दें।
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)किसी नोड या ValueXY के हर बदलाव पर फ़ंक्शन कॉल करें; अनमाउंट पर हट जाता है।
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })हुक आधारित प्रवेश और निकास के लिए { mounted, animatedValue } लौटाएँ।
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;अपने नीचे के हुक मानों के लिए डिफ़ॉल्ट CSS वेरिएबल scope तय करें।
गाइड: मान और स्टाइलflushAnimatedUpdates
flushAnimatedUpdates();निर्धारक टेस्ट के लिए लंबित आउटपुट सिंक्रोनस रूप से लागू करें।
गाइड: मान और स्टाइलDriver, संयोजन और टाइमलाइन
timing
timing(value, { toValue, duration?, delay?, easing? })तय अवधि में easing वक्र पर मान हिलाएँ।
गाइड: Timing, स्प्रिंग और संयोजनspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })स्प्रिंग भौतिकी से मान हिलाएँ, रुकी हुई गति का वेग बनाए रखते हुए।
गाइड: Timing, स्प्रिंग और संयोजनdecay
decay(value, { velocity, deceleration? })एक वेग से शुरू करके धीमा करें।
गाइड: Timing, स्प्रिंग और संयोजनdelay
delay(ms);सिर्फ़ इंतज़ार करने वाला कंट्रोलर।
गाइड: Timing, स्प्रिंग और संयोजनsequence
sequence([a, b, c]);कंट्रोलर एक के बाद एक चलाएँ।
गाइड: Timing, स्प्रिंग और संयोजनparallel
parallel([a, b], { stopTogether? }?)कंट्रोलर साथ में चलाएँ।
गाइड: Timing, स्प्रिंग और संयोजनstagger
stagger(ms, [a, b, c]);तय अंतराल पर कंट्रोलर एक के बाद एक शुरू करें।
गाइड: Timing, स्प्रिंग और संयोजनloop
loop(animation, { iterations?, resetBeforeIteration? }?)कंट्रोलर को कुछ बार या हमेशा दोहराएँ।
गाइड: Timing, स्प्रिंग और संयोजनkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)मान को कई संख्याओं से गुज़ारें, वैकल्पिक समय और दोहराव के साथ।
गाइड: Timing, स्प्रिंग और संयोजनEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Native से मेल खाते वक्र: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier और in/out सहायक।
गाइड: Timing, स्प्रिंग और संयोजनcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)नामित ट्रैक वाली seek योग्य घड़ी, React के बाहर।
गाइड: Timing, स्प्रिंग और संयोजनuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)कंपोनेंट की अपनी टाइमलाइन, जिसके ट्रैक सीधे सामान्य स्टाइल में काम करते हैं।
गाइड: Timing, स्प्रिंग और संयोजनकंपोनेंट और लेआउट
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div जैसे HTML और SVG होस्ट का नेमस्पेस, साथ में React Native नामों वाले मूल फ़ंक्शन।
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref आगे भेजने वाले कंपोनेंट को Animated होस्ट props स्वीकार करने लायक बनाएँ।
गाइड: Animated कंपोनेंटAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>भीतर के Animated एलिमेंट के साथ pose का नाम, tempo और एनिमेशन डिफ़ॉल्ट साझा करें।
गाइड: Animated कंपोनेंटAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>key वाले children को उनका प्रस्थान पूरा होने तक माउंट रखें।
गाइड: Animated कंपोनेंटAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move एलिमेंट के लेआउट बदलाव एनिमेट करें और एक ही पहचान वाले एलिमेंट जोड़ें।
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }दूसरे रेंडरर के लिए वही कैप्चर और commit लेआउट तालमेल।
गाइड: Animated कंपोनेंटuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)एक अक्ष पर नियंत्रित सूची का पॉइंटर और कीबोर्ड से क्रम बदलना।
गाइड: Animated कंपोनेंटइनपुट और जुड़ाव
input
input(targetRef, adapter, onEvent?)एलिमेंट से इनपुट एडेप्टर को स्वामित्व वाले कंट्रोलर के रूप में जोड़ें।
गाइड: इनपुट और जेस्चरfollow
follow(target, source, { stiffness?, damping?, mass? }?)एक मान को स्प्रिंग के साथ दूसरे के पीछे चलाएँ।
गाइड: इनपुट और जेस्चरconnect
connect(node, (value) => write(value));नोड का हर बदलाव किसी फ़ंक्शन को भेजें।
गाइड: इनपुट और जेस्चरevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);नेस्टेड इवेंट डेटा को मानों में मैप करें, React Native की तरह।
गाइड: इनपुट और जेस्चरdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })सीमाओं, लचीले किनारों, momentum और settle के साथ पॉइंटर और कीबोर्ड से खींचना।
गाइड: इनपुट और जेस्चरpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })दो पॉइंटर वाले जेस्चर से पैमाना और घुमाव।
गाइड: इनपुट और जेस्चरmoveInput
moveInput({ x?, y?, relative?, reset? })पॉइंटर के निर्देशांक, चाहें तो एलिमेंट के केंद्र के सापेक्ष।
गाइड: इनपुट और जेस्चरscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })किसी एलिमेंट, पेज या व्यूपोर्ट से गुज़रते एलिमेंट की स्क्रॉल स्थिति और प्रगति।
गाइड: इनपुट और जेस्चरwheelInput
wheelInput({ x?, y? })व्हील के डेल्टा।
गाइड: इनपुट और जेस्चरviewportInput
viewportInput({ root?, margin?, amount?, once? })एलिमेंट व्यूपोर्ट में है या नहीं।
गाइड: इनपुट और जेस्चरmediaInput
mediaInput('(min-width: 768px)');मीडिया क्वेरी मेल खाती है या नहीं।
गाइड: इनपुट और जेस्चरlongPressInput
longPressInput({ delay?, threshold? })देरी के बाद और हलचल की सीमा के भीतर दबाकर रखा गया पॉइंटर।
गाइड: इनपुट और जेस्चरswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })स्वाइप की दिशा, दूरी और वेग।
गाइड: इनपुट और जेस्चरआउटपुट और निदान
bind
bind(element, style) → { update, inspect, dispose }React के बाहर Animated स्टाइल को एलिमेंट से बाँधें; update, inspect और dispose लौटाता है।
inspect
inspect(element) → [{ property, driver, reason }]एलिमेंट की हर एनिमेटेड प्रॉपर्टी का प्लेबैक रास्ता और वैकल्पिक रास्ते का कारण।
गाइड: प्रदर्शन और प्लेबैकoutput
output(targetRef, { style?, attributes?, properties?, text? })useAnimated के भीतर स्टाइल, एट्रिब्यूट, टेक्स्ट या प्रॉपर्टी आउटपुट का मालिक बनें।
bindOutput
bindOutput(target, mapping) → { flush, dispose }आउटपुट मैपिंग तुरंत जोड़ें; flush और dispose लौटाता है।