Value
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation आणि resetAnimation असलेली बदलता येणारी संख्या.
API संदर्भ
@kkwaenggwari/animated चे प्रत्येक export, त्याच्या सिग्नेचर आणि ते स्पष्ट करणाऱ्या मार्गदर्शकासह.
मूल्ये आणि आलेख
ValueXY
new ValueXY({ x?, y? })त्याच क्रियांसह जोडलेली x आणि y मूल्ये, शिवाय getLayout आणि getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)React बाहेर संख्या किंवा नाव असलेला संख्यात्मक record तयार करा. तयार करणे काहीही चालवत नाही.
मार्गदर्शक: मूल्ये आणि styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)प्रत्येक मूल्य आणि आलेखाचा फक्त-वाचन आधार: getValue, interpolate आणि listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })इनपुट श्रेणीपासून आउटपुट श्रेणीपर्यंत जिवंत मॅपिंग, easing आणि extend, clamp किंवा identity extrapolation सह.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);एक किंवा अधिक इनपुटवरील शुद्ध, फक्त-वाचन गणना. ती वापरणारे आउटपुट JavaScript मध्ये चालतात.
मार्गदर्शक: मूल्ये आणि styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });साध्या संख्येसाठी interpolation एकदा मोजा.
मार्गदर्शक: मूल्ये आणि styleadd
add(...inputs);संख्या आणि मूल्यांची बेरीज.
मार्गदर्शक: मूल्ये आणि stylesubtract
subtract(a, b);दोन इनपुटमधील फरक.
मार्गदर्शक: मूल्ये आणि stylemultiply
multiply(...inputs);संख्या आणि मूल्यांचा गुणाकार.
मार्गदर्शक: मूल्ये आणि styledivide
divide(a, b);दोन इनपुटचा भागाकार.
मार्गदर्शक: मूल्ये आणि stylemodulo
modulo(a, b);गुंडाळलेले मूल्य, उदाहरणार्थ अंतहीन फिरणे.
मार्गदर्शक: मूल्ये आणि stylediffClamp
diffClamp(input, min, max);इनपुटच्या बदलांचे अनुसरण करते पण श्रेणीत राहते; स्क्रोलवर लपणाऱ्या हेडरसाठी उपयुक्त.
मार्गदर्शक: मूल्ये आणि styleReact हुक
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)कंपोनंटच्या आयुष्यासाठी संख्या किंवा संख्यात्मक record ठेवा. style मध्ये ते CSS व्हेरिएबल आहे.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)एक मूल्य आणि त्याच्या factory मध्ये घोषित प्रत्येक कंट्रोलर, इनपुट आणि आउटपुट ठेवा. सुरू करते, अवलंबित्व बदलल्यावर पुन्हा सुरू करते आणि स्वच्छता करते.
मार्गदर्शक: मूल्ये आणि styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)पूर्ण द्विमितीय मूल्य ठेवा.
मार्गदर्शक: मूल्ये आणि styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringcalc() अभिव्यक्ती नसलेल्या व्युत्पन्न node ला, कंपोनंट आयुष्यासह, स्वतःचा CSS व्हेरिएबल द्या.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)node किंवा ValueXY च्या प्रत्येक बदलावर फंक्शन कॉल करा; अनमाउंटवर काढले जाते.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })हुक-आधारित प्रवेश आणि बाहेर पडण्यासाठी { mounted, animatedValue } परत करते.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;त्याच्या खालील हुक मूल्यांसाठी डीफॉल्ट CSS व्हेरिएबल scope सेट करतो.
मार्गदर्शक: मूल्ये आणि styleflushAnimatedUpdates
flushAnimatedUpdates();निर्धारित चाचण्यांसाठी प्रलंबित आउटपुट synchronous पद्धतीने लागू करते.
मार्गदर्शक: मूल्ये आणि styleDriver, रचना आणि टाइमलाइन
timing
timing(value, { toValue, duration?, delay?, easing? })निश्चित कालावधीसाठी easing वक्रावर मूल्य हलवा.
मार्गदर्शक: Timing, spring आणि रचनाspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })व्यत्यय आलेल्या मोशनचा वेग राखून spring भौतिकशास्त्राने मूल्य हलवा.
मार्गदर्शक: Timing, spring आणि रचनाdecay
decay(value, { velocity, deceleration? })वेगाने सुरू करा आणि मंदावा.
मार्गदर्शक: Timing, spring आणि रचनाdelay
delay(ms);फक्त वाट पाहणारा कंट्रोलर.
मार्गदर्शक: Timing, spring आणि रचनाsequence
sequence([a, b, c]);कंट्रोलर एकामागून एक चालवा.
मार्गदर्शक: Timing, spring आणि रचनाparallel
parallel([a, b], { stopTogether? }?)कंट्रोलर एकत्र चालवा.
मार्गदर्शक: Timing, spring आणि रचनाstagger
stagger(ms, [a, b, c]);कंट्रोलर निश्चित अंतराने एकामागून एक सुरू करा.
मार्गदर्शक: Timing, spring आणि रचनाloop
loop(animation, { iterations?, resetBeforeIteration? }?)कंट्रोलरची ठरावीक वेळा किंवा कायमची पुनरावृत्ती करा.
मार्गदर्शक: Timing, spring आणि रचनाkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)ऐच्छिक वेळा आणि पुनरावृत्तीसह मूल्य अनेक संख्यांमधून चालवा.
मार्गदर्शक: Timing, spring आणि रचना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, spring आणि रचनाcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)React बाहेर, नाव असलेल्या ट्रॅकसह शोधता येणारे घड्याळ.
मार्गदर्शक: Timing, spring आणि रचनाuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)ज्याचे ट्रॅक थेट साध्या style मध्ये चालतात अशी कंपोनंटच्या मालकीची टाइमलाइन.
मार्गदर्शक: Timing, spring आणि रचनाकंपोनंट आणि लेआउट
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div सारख्या HTML आणि SVG होस्टचा namespace, शिवाय 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 असलेल्या मुलांना त्यांचे बाहेर पडणे संपेपर्यंत माउंट ठेवा.
मार्गदर्शक: Animated कंपोनंटAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move एलिमेंट्सचे लेआउट बदल ॲनिमेट करतो आणि समान ओळख असलेले एलिमेंट्स जोडतो.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }इतर रेंडररसाठी तेच capture आणि commit लेआउट समन्वय.
मार्गदर्शक: Animated कंपोनंटuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)नियंत्रित सूचीचा एका अक्षावर पॉइंटर आणि कीबोर्डने क्रम बदलणे.
मार्गदर्शक: Animated कंपोनंटइनपुट आणि जोडण्या
input
input(targetRef, adapter, onEvent?)इनपुट अडॅप्टर एलिमेंटला मालकीचा कंट्रोलर म्हणून जोडा.
मार्गदर्शक: इनपुट आणि हावभावfollow
follow(target, source, { stiffness?, damping?, mass? }?)एका मूल्याला दुसऱ्याच्या मागे spring ने जायला लावा.
मार्गदर्शक: इनपुट आणि हावभावconnect
connect(node, (value) => write(value));node चा प्रत्येक बदल फंक्शनकडे पाठवा.
मार्गदर्शक: इनपुट आणि हावभाव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? })एलिमेंट, पान किंवा viewport मधून जाणाऱ्या एलिमेंटची स्क्रोल स्थिती आणि प्रगती.
मार्गदर्शक: इनपुट आणि हावभावwheelInput
wheelInput({ x?, y? })व्हील बदल.
मार्गदर्शक: इनपुट आणि हावभावviewportInput
viewportInput({ root?, margin?, amount?, once? })एलिमेंट viewport मध्ये आहे का.
मार्गदर्शक: इनपुट आणि हावभावmediaInput
mediaInput('(min-width: 768px)');media query जुळते का.
मार्गदर्शक: इनपुट आणि हावभाव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 }]एलिमेंटच्या प्रत्येक ॲनिमेटेड गुणधर्माचा प्लेबॅक मार्ग आणि fallback कारण.
मार्गदर्शक: कार्यक्षमता आणि प्लेबॅकoutput
output(targetRef, { style?, attributes?, properties?, text? })useAnimated मध्ये style, attribute, मजकूर किंवा गुणधर्म आउटपुट ठेवा.
bindOutput
bindOutput(target, mapping) → { flush, dispose }आउटपुट मॅपिंग लगेच जोडते; flush आणि dispose परत करते.