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>ఒక pose పేరు, tempo, యానిమేషన్ డిఫాల్ట్‌లను లోపలి Animated ఎలిమెంట్లతో పంచుకోండి.
గైడ్: 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 ఇస్తుంది.