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-ஐயோ உருவாக்குங்கள். உருவாக்குவது எதையும் இயக்காது.
வழிகாட்டி: மதிப்புகளும் style-உம்AnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)ஒவ்வொரு மதிப்பு, வரைபடத்தின் படிக்க மட்டுமான அடிப்படை: getValue, interpolate, listener-கள்.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })உள்ளீட்டு வரம்பிலிருந்து வெளியீட்டு வரம்புக்கு நேரடி mapping; easing-உம் extend, clamp அல்லது identity extrapolation-உம் உடன்.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);ஒன்று அல்லது பல உள்ளீடுகளின் மீதான தூய, படிக்க மட்டுமான கணக்கீடு. இதைப் பயன்படுத்தும் வெளியீடுகள் JavaScript-இல் இயங்குகின்றன.
வழிகாட்டி: மதிப்புகளும் style-உம்interpolateFn
interpolateFn({ value, inputRange, outputRange });ஒரு சாதாரண எண்ணுக்கு interpolation-ஐ ஒருமுறை கணக்கிடுங்கள்.
வழிகாட்டி: மதிப்புகளும் style-உம்add
add(...inputs);எண்கள், மதிப்புகளின் கூட்டல்.
வழிகாட்டி: மதிப்புகளும் style-உம்subtract
subtract(a, b);இரண்டு உள்ளீடுகளின் வேறுபாடு.
வழிகாட்டி: மதிப்புகளும் style-உம்multiply
multiply(...inputs);எண்கள், மதிப்புகளின் பெருக்கல்.
வழிகாட்டி: மதிப்புகளும் style-உம்divide
divide(a, b);இரண்டு உள்ளீடுகளின் ஈவு.
வழிகாட்டி: மதிப்புகளும் style-உம்modulo
modulo(a, b);சுற்றிவரும் மதிப்பு, உதாரணமாக முடிவற்ற சுழற்சி.
வழிகாட்டி: மதிப்புகளும் style-உம்diffClamp
diffClamp(input, min, max);உள்ளீட்டின் மாற்றங்களைப் பின்பற்றி ஒரு வரம்புக்குள் இருக்கிறது; உருட்டும்போது மறையும் தலைப்புகளுக்குப் பயனுள்ளது.
வழிகாட்டி: மதிப்புகளும் style-உம்React ஹூக்குகள்
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)கம்போனென்டின் வாழ்நாளுக்கு ஒரு எண்ணையோ எண் record-ஐயோ வைத்திருங்கள். style-இல் இது ஒரு CSS மாறி.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)ஒரு மதிப்பையும் அதன் factory-இல் அறிவிக்கப்பட்ட ஒவ்வொரு கட்டுப்படுத்தி, உள்ளீடு, வெளியீட்டையும் வைத்திருங்கள். தொடங்குகிறது, சார்பு மாறும்போது மீண்டும் தொடங்குகிறது, சுத்தம் செய்கிறது.
வழிகாட்டி: மதிப்புகளும் style-உம்useAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)முழுமையான இருபரிமாண மதிப்பை வைத்திருங்கள்.
வழிகாட்டி: மதிப்புகளும் style-உம்useAnimatedCSS
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-ஐ அமைக்கிறது.
வழிகாட்டி: மதிப்புகளும் style-உம்flushAnimatedUpdates
flushAnimatedUpdates();நிர்ணயிக்கப்பட்ட சோதனைகளுக்காக, நிலுவையிலுள்ள வெளியீட்டை synchronous ஆகப் பயன்படுத்துகிறது.
வழிகாட்டி: மதிப்புகளும் style-உம்driver-கள், சேர்க்கை, காலவரிசைகள்
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 host-களின் namespace, கூடவே React Native பெயர்களில் மைய ஃபங்ஷன்கள்.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref-அனுப்பும் கம்போனென்டை Animated host 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 போல, உள்ளடுக்கு நிகழ்வுத் தரவை மதிப்புகளுக்கு mapping செய்யுங்கள்.
வழிகாட்டி: உள்ளீடும் சைகைகளும்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 style-களை இணையுங்கள்; 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 }வெளியீட்டு mapping-ஐ உடனே இணைக்கிறது; flush, dispose-ஐத் தருகிறது.