Value
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation ಮತ್ತು resetAnimation ಇರುವ ಬದಲಾಯಿಸಬಹುದಾದ ಸಂಖ್ಯೆ.
@kkwaenggwari/animated ನ ಪ್ರತಿ export, ಅದರ ಸಿಗ್ನೇಚರ್ ಮತ್ತು ಅದನ್ನು ವಿವರಿಸುವ ಮಾರ್ಗದರ್ಶಿಯೊಂದಿಗೆ.
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation ಮತ್ತು resetAnimation ಇರುವ ಬದಲಾಯಿಸಬಹುದಾದ ಸಂಖ್ಯೆ.
new ValueXY({ x?, y? })ಅದೇ ಕಾರ್ಯಗಳೊಂದಿಗೆ ಜೋಡಿ x ಮತ್ತು y ಮೌಲ್ಯಗಳು, ಜೊತೆಗೆ getLayout ಮತ್ತು getTranslateTransform.
createValue(initial: number | Record<string, number>)React ಹೊರಗೆ ಸಂಖ್ಯೆ ಅಥವಾ ಹೆಸರಿಸಿದ ಸಂಖ್ಯಾತ್ಮಕ record ರಚಿಸಿ. ರಚನೆ ಏನನ್ನೂ ನಡೆಸುವುದಿಲ್ಲ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು stylenode.getValue() · node.interpolate(config) · node.addListener(fn)ಪ್ರತಿ ಮೌಲ್ಯ ಮತ್ತು ಗ್ರಾಫ್ನ ಓದಲು-ಮಾತ್ರ ಆಧಾರ: getValue, interpolate ಮತ್ತು listener ಗಳು.
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })ಇನ್ಪುಟ್ ವ್ಯಾಪ್ತಿಯಿಂದ ಔಟ್ಪುಟ್ ವ್ಯಾಪ್ತಿಗೆ ಜೀವಂತ ಮ್ಯಾಪಿಂಗ್, easing ಮತ್ತು extend, clamp ಅಥವಾ identity extrapolation ನೊಂದಿಗೆ.
new AnimatedComputed(inputs, (...values) => result);ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಇನ್ಪುಟ್ಗಳ ಮೇಲಿನ ಶುದ್ಧ, ಓದಲು-ಮಾತ್ರ ಲೆಕ್ಕಾಚಾರ. ಅದನ್ನು ಬಳಸುವ ಔಟ್ಪುಟ್ಗಳು JavaScript ನಲ್ಲಿ ನಡೆಯುತ್ತವೆ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleinterpolateFn({ value, inputRange, outputRange });ಸಾಮಾನ್ಯ ಸಂಖ್ಯೆಗೆ interpolation ಅನ್ನು ಒಮ್ಮೆ ಲೆಕ್ಕಹಾಕಿ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleadd(...inputs);ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳ ಮೊತ್ತ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು stylesubtract(a, b);ಎರಡು ಇನ್ಪುಟ್ಗಳ ವ್ಯತ್ಯಾಸ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು stylemultiply(...inputs);ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳ ಗುಣಲಬ್ಧ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styledivide(a, b);ಎರಡು ಇನ್ಪುಟ್ಗಳ ಭಾಗಲಬ್ಧ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು stylemodulo(a, b);ಸುತ್ತಿಕೊಳ್ಳುವ ಮೌಲ್ಯ, ಉದಾಹರಣೆಗೆ ಅಂತ್ಯವಿಲ್ಲದ ತಿರುಗುವಿಕೆ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು stylediffClamp(input, min, max);ಇನ್ಪುಟ್ನ ಬದಲಾವಣೆಗಳನ್ನು ಅನುಸರಿಸಿ ಒಂದು ವ್ಯಾಪ್ತಿಯೊಳಗೆ ಇರುತ್ತದೆ; ಸ್ಕ್ರೋಲ್ನಲ್ಲಿ ಮರೆಯಾಗುವ ಹೆಡರ್ಗಳಿಗೆ ಉಪಯುಕ್ತ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleuseAnimatedValue(initial, { scope?, id? }?)ಕಾಂಪೊನೆಂಟ್ನ ಜೀವಿತಾವಧಿಗೆ ಸಂಖ್ಯೆ ಅಥವಾ ಸಂಖ್ಯಾತ್ಮಕ record ಇಟ್ಟುಕೊಳ್ಳಿ. style ನಲ್ಲಿ ಇದು CSS ವೇರಿಯಬಲ್.
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)ಒಂದು ಮೌಲ್ಯ ಮತ್ತು ಅದರ factory ಯಲ್ಲಿ ಘೋಷಿಸಿದ ಪ್ರತಿ ಕಂಟ್ರೋಲರ್, ಇನ್ಪುಟ್ ಮತ್ತು ಔಟ್ಪುಟ್ ಇಟ್ಟುಕೊಳ್ಳಿ. ಆರಂಭಿಸುತ್ತದೆ, ಅವಲಂಬನೆ ಬದಲಾದಾಗ ಮರುಆರಂಭಿಸುತ್ತದೆ ಮತ್ತು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleuseAnimatedValueXY({ x?, y? }?, options?)ಸಂಪೂರ್ಣ ದ್ವಿಆಯಾಮದ ಮೌಲ್ಯ ಇಟ್ಟುಕೊಳ್ಳಿ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleuseAnimatedCSS(node, { scope?, id? }?): stringcalc() ಅಭಿವ್ಯಕ್ತಿಯಲ್ಲದ ವ್ಯುತ್ಪನ್ನ node ಗೆ, ಕಾಂಪೊನೆಂಟ್ ಜೀವಿತಾವಧಿಯೊಂದಿಗೆ, ಸ್ವಂತ CSS ವೇರಿಯಬಲ್ ಕೊಡಿ.
useAnimatedListener(node, ({ value }) => void)node ಅಥವಾ ValueXY ನ ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲೂ ಫಂಕ್ಷನ್ ಕಾಲ್ ಮಾಡಿ; ಅನ್ಮೌಂಟ್ನಲ್ಲಿ ತೆಗೆಯಲಾಗುತ್ತದೆ.
useAnimatedPresence(visible, { enter, exit, onExitComplete? })ಹುಕ್ ಆಧಾರಿತ ಪ್ರವೇಶ ಮತ್ತು ನಿರ್ಗಮನಕ್ಕಾಗಿ { mounted, animatedValue } ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
<AnimatedProvider scope={ref}>…</AnimatedProvider>;ತನ್ನ ಕೆಳಗಿನ ಹುಕ್ ಮೌಲ್ಯಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ CSS ವೇರಿಯಬಲ್ scope ಹೊಂದಿಸುತ್ತದೆ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styleflushAnimatedUpdates();ನಿರ್ಧಾರಿತ ಪರೀಕ್ಷೆಗಳಿಗಾಗಿ ಬಾಕಿ ಔಟ್ಪುಟ್ ಅನ್ನು synchronous ಆಗಿ ಅನ್ವಯಿಸುತ್ತದೆ.
ಮಾರ್ಗದರ್ಶಿ: ಮೌಲ್ಯಗಳು ಮತ್ತು styletiming(value, { toValue, duration?, delay?, easing? })ಸ್ಥಿರ ಅವಧಿಗೆ easing ವಕ್ರದ ಮೇಲೆ ಮೌಲ್ಯವನ್ನು ಚಲಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆspring(value, { toValue, stiffness?, damping?, mass?, velocity? })ಅಡಚಣೆಯಾದ ಮೋಷನ್ನ ವೇಗ ಉಳಿಸಿಕೊಂಡು spring ಭೌತಶಾಸ್ತ್ರದಿಂದ ಮೌಲ್ಯವನ್ನು ಚಲಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆdecay(value, { velocity, deceleration? })ವೇಗದಿಂದ ಆರಂಭಿಸಿ ನಿಧಾನವಾಗಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆdelay(ms);ಕಾಯುವುದನ್ನು ಮಾತ್ರ ಮಾಡುವ ಕಂಟ್ರೋಲರ್.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆsequence([a, b, c]);ಕಂಟ್ರೋಲರ್ಗಳನ್ನು ಒಂದರ ನಂತರ ಒಂದು ನಡೆಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆparallel([a, b], { stopTogether? }?)ಕಂಟ್ರೋಲರ್ಗಳನ್ನು ಒಟ್ಟಿಗೆ ನಡೆಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆstagger(ms, [a, b, c]);ಕಂಟ್ರೋಲರ್ಗಳನ್ನು ಸ್ಥಿರ ಅಂತರದೊಂದಿಗೆ ಒಂದರ ನಂತರ ಒಂದು ಆರಂಭಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆloop(animation, { iterations?, resetBeforeIteration? }?)ಕಂಟ್ರೋಲರ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟ ಬಾರಿ ಅಥವಾ ಶಾಶ್ವತವಾಗಿ ಪುನರಾವರ್ತಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆkeyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)ಐಚ್ಛಿಕ ಸಮಯಗಳು ಮತ್ತು ಪುನರಾವರ್ತನೆಗಳೊಂದಿಗೆ ಮೌಲ್ಯವನ್ನು ಅನೇಕ ಸಂಖ್ಯೆಗಳ ಮೂಲಕ ನಡೆಸಿ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆ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({ track: [a, b] }, { duration?, repeat? }?)React ಹೊರಗೆ, ಹೆಸರಿಸಿದ ಟ್ರ್ಯಾಕ್ಗಳೊಂದಿಗೆ ಹುಡುಕಬಹುದಾದ ಗಡಿಯಾರ.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆuseTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)ಟ್ರ್ಯಾಕ್ಗಳು ನೇರವಾಗಿ ಸಾಮಾನ್ಯ style ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ, ಕಾಂಪೊನೆಂಟ್ಗೆ ಸೇರಿದ ಟೈಮ್ಲೈನ್.
ಮಾರ್ಗದರ್ಶಿ: Timing, spring ಗಳು ಮತ್ತು ಸಂಯೋಜನೆ<Animated.div seed pose tempo respond depart move />;Animated.div ನಂತಹ HTML ಮತ್ತು SVG ಹೋಸ್ಟ್ಗಳ namespace, ಜೊತೆಗೆ React Native ಹೆಸರುಗಳಡಿ ಮುಖ್ಯ ಫಂಕ್ಷನ್ಗಳು.
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref-ಫಾರ್ವರ್ಡಿಂಗ್ ಕಾಂಪೊನೆಂಟ್ Animated ಹೋಸ್ಟ್ props ಸ್ವೀಕರಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
ಮಾರ್ಗದರ್ಶಿ: Animated ಕಾಂಪೊನೆಂಟ್ಗಳು<Animated.Scope pose? tempo? animation?>…</Animated.Scope>ಒಳಗಿನ Animated ಎಲಿಮೆಂಟ್ಗಳೊಂದಿಗೆ pose ಹೆಸರು, tempo ಮತ್ತು ಅನಿಮೇಶನ್ ಡೀಫಾಲ್ಟ್ಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಿ.
ಮಾರ್ಗದರ್ಶಿ: Animated ಕಾಂಪೊನೆಂಟ್ಗಳು<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>key ಇರುವ ಮಕ್ಕಳನ್ನು ಅವುಗಳ ನಿರ್ಗಮನ ಮುಗಿಯುವವರೆಗೆ ಮೌಂಟ್ ಆಗಿಡಿ.
ಮಾರ್ಗದರ್ಶಿ: Animated ಕಾಂಪೊನೆಂಟ್ಗಳು<Animated.Scene tempo?>…</Animated.Scene>move ಎಲಿಮೆಂಟ್ಗಳ ಲೇಔಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಿ ಅದೇ ಗುರುತಿನ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ.
createLayoutScene(options?) → { attach, capture, commit, dispose }ಇತರ ರೆಂಡರರ್ಗಳಿಗೆ ಅದೇ capture ಮತ್ತು commit ಲೇಔಟ್ ಸಮನ್ವಯ.
ಮಾರ್ಗದರ್ಶಿ: Animated ಕಾಂಪೊನೆಂಟ್ಗಳುuseReorder(items, onChange, { key?, axis?, tempo? }?)ನಿಯಂತ್ರಿತ ಪಟ್ಟಿಯನ್ನು ಒಂದು ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಪಾಯಿಂಟರ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ನಿಂದ ಕ್ರಮ ಬದಲಿಸುವುದು.
ಮಾರ್ಗದರ್ಶಿ: Animated ಕಾಂಪೊನೆಂಟ್ಗಳುinput(targetRef, adapter, onEvent?)ಇನ್ಪುಟ್ ಅಡಾಪ್ಟರ್ ಅನ್ನು ಎಲಿಮೆಂಟ್ಗೆ ಸ್ವಾಮ್ಯದ ಕಂಟ್ರೋಲರ್ ಆಗಿ ಜೋಡಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುfollow(target, source, { stiffness?, damping?, mass? }?)ಒಂದು ಮೌಲ್ಯವನ್ನು ಇನ್ನೊಂದರ ಹಿಂದೆ spring ನಿಂದ ಸಾಗುವಂತೆ ಮಾಡಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುconnect(node, (value) => write(value));node ನ ಪ್ರತಿ ಬದಲಾವಣೆಯನ್ನು ಫಂಕ್ಷನ್ಗೆ ಕಳುಹಿಸಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುAnimated.event([{ nativeEvent: { contentOffset: { y } } }]);React Native ನಂತೆ, ನೆಸ್ಟೆಡ್ ಈವೆಂಟ್ ಡೇಟಾವನ್ನು ಮೌಲ್ಯಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುdragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })ಗಡಿಗಳು, ಸ್ಥಿತಿಸ್ಥಾಪಕ ಅಂಚುಗಳು, momentum ಮತ್ತು settle ನೊಂದಿಗೆ ಪಾಯಿಂಟರ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಎಳೆಯುವಿಕೆ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುpinchInput({ scale?, rotation?, minScale?, maxScale? })ಎರಡು-ಪಾಯಿಂಟರ್ ಸನ್ನೆಯಿಂದ ಸ್ಕೇಲ್ ಮತ್ತು ತಿರುಗುವಿಕೆ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುmoveInput({ x?, y?, relative?, reset? })ಪಾಯಿಂಟರ್ ನಿರ್ದೇಶಾಂಕಗಳು, ಐಚ್ಛಿಕವಾಗಿ ಎಲಿಮೆಂಟ್ನ ಕೇಂದ್ರಕ್ಕೆ ಸಾಪೇಕ್ಷವಾಗಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುscrollInput({ x?, y?, progressX?, progressY?, target?, through? })ಎಲಿಮೆಂಟ್, ಪುಟ, ಅಥವಾ viewport ಮೂಲಕ ಹಾದುಹೋಗುವ ಎಲಿಮೆಂಟ್ನ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನ ಮತ್ತು ಪ್ರಗತಿ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುwheelInput({ x?, y? })ವೀಲ್ ಬದಲಾವಣೆಗಳು.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುviewportInput({ root?, margin?, amount?, once? })ಎಲಿಮೆಂಟ್ viewport ನಲ್ಲಿದೆಯೇ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುmediaInput('(min-width: 768px)');media query ಹೊಂದುತ್ತದೆಯೇ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುlongPressInput({ delay?, threshold? })ವಿಳಂಬದ ನಂತರ, ಚಲನೆಯ ಮಿತಿಯೊಳಗೆ ಹಿಡಿದಿರುವ ಪಾಯಿಂಟರ್.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುswipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })ಸ್ವೈಪ್ ದಿಕ್ಕು, ದೂರ ಮತ್ತು ವೇಗ.
ಮಾರ್ಗದರ್ಶಿ: ಇನ್ಪುಟ್ ಮತ್ತು ಸನ್ನೆಗಳುbind(element, style) → { update, inspect, dispose }React ಹೊರಗೆ ಎಲಿಮೆಂಟ್ಗೆ Animated ಶೈಲಿಗಳನ್ನು ಬಂಧಿಸಿ; update, inspect ಮತ್ತು dispose ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
inspect(element) → [{ property, driver, reason }]ಎಲಿಮೆಂಟ್ನ ಪ್ರತಿ ಅನಿಮೇಟೆಡ್ ಗುಣಲಕ್ಷಣದ ಪ್ಲೇಬ್ಯಾಕ್ ಮಾರ್ಗ ಮತ್ತು fallback ಕಾರಣ.
ಮಾರ್ಗದರ್ಶಿ: ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ಲೇಬ್ಯಾಕ್output(targetRef, { style?, attributes?, properties?, text? })useAnimated ಒಳಗೆ style, attribute, ಪಠ್ಯ ಅಥವಾ ಗುಣಲಕ್ಷಣ ಔಟ್ಪುಟ್ ಇಟ್ಟುಕೊಳ್ಳಿ.
bindOutput(target, mapping) → { flush, dispose }ಔಟ್ಪುಟ್ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ತಕ್ಷಣ ಜೋಡಿಸುತ್ತದೆ; flush ಮತ್ತು dispose ಹಿಂತಿರುಗಿಸುತ್ತದೆ.