Value
new Value(initial: number)מספר שניתן לשנות עם setValue, setOffset, flattenOffset, extractOffset, stopAnimation ו־resetAnimation.
עיון ב־API
כל export של @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 ומאזינים.
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);עוקב אחרי השינויים בקלט אבל נשאר בטווח; שימושי לכותרות שמתחבאות בגלילה.
מדריך: ערכים וסגנוןhooks של 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 } לכניסה ויציאה מבוססות hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;קובע scope ברירת מחדל למשתני CSS של ערכי ה־hooks מתחתיו.
מדריך: ערכים וסגנוןflushAnimatedUpdates
flushAnimatedUpdates();מחיל פלט ממתין באופן סינכרוני, לבדיקות דטרמיניסטיות.
מדריך: ערכים וסגנוןDrivers, הרכבה וצירי זמן
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? }?)שעון שאפשר לדלג בו עם רצועות בעלות שם, מחוץ ל־React.
מדריך: Timing, קפיצים והרכבהuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)ציר זמן ששייך לרכיב, שהרצועות שלו עובדות ישירות ב־style רגיל.
מדריך: Timing, קפיצים והרכבהרכיבים ופריסה
Animated
<Animated.div seed pose tempo respond depart move />;ה־namespace של מארחי HTML ו־SVG כמו Animated.div, ועוד הפונקציות המרכזיות בשמות של React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)לגרום לרכיב שמעביר ref לקבל את ה־props של מארחי Animated.
מדריך: רכיבי AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>לשתף שם pose, tempo וברירות מחדל של אנימציה עם האלמנטים של Animated שבתוכו.
מדריך: רכיבי AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>להשאיר ילדים עם key מורכבים עד שהיציאה שלהם מסתיימת.
מדריך: רכיבי AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>להנפיש שינויי פריסה של אלמנטים עם move ולחבר אלמנטים עם אותה זהות.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }אותו תיאום פריסה של לכידה ו־commit עבור renderers אחרים.
מדריך: רכיבי AnimateduseReorder
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? })גרירה עם סמן ומקלדת, עם גבולות, קצוות אלסטיים, תנופה ו־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)');האם media query תואם.
מדריך: קלט ומחוותlongPressInput
longPressInput({ delay?, threshold? })סמן שמוחזק אחרי השהיה ובתוך סף תנועה.
מדריך: קלט ומחוותswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })כיוון, מרחק ומהירות של החלקה.
מדריך: קלט ומחוותפלט ואבחון
bind
bind(element, style) → { update, inspect, dispose }לחבר סגנונות של Animated לאלמנט מחוץ ל־React; מחזיר update, inspect ו־dispose.
inspect
inspect(element) → [{ property, driver, reason }]מסלול הניגון וסיבת ה־fallback של כל מאפיין מונפש של אלמנט.
מדריך: ביצועים וניגוןoutput
output(targetRef, { style?, attributes?, properties?, text? })להחזיק פלט לסגנון, לתכונה, לטקסט או למאפיין בתוך useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }לחבר מיפוי פלט מיד; מחזיר flush ו־dispose.