Value
new Value(initial: number)رقم قابل للتغيير مع setValue وsetOffset وflattenOffset وextractOffset وstopAnimation وresetAnimation.
مرجع API
كل تصدير في @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);تتبع تغيّرات المدخل لكنها تبقى ضمن نطاق؛ مفيدة للترويسات التي تختفي مع التمرير.
الدليل: القيم والأنماطخطّافات React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)امتلك رقمًا أو سجلًا رقميًا طوال عمر المكوّن. وهو في style متغيّر CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)امتلك قيمة مع كل متحكم ومدخل ومخرج يُعرَّف في دالة المصنع الخاصة بها. يبدأ، ويعيد البدء عند تغيّر التبعيات، وينظّف.
الدليل: القيم والأنماط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 } للدخول والخروج المعتمدين على الخطّافات.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;اضبط نطاق متغيّرات CSS افتراضيًا لقيم الخطّافات تحته.
الدليل: القيم والأنماطflushAnimatedUpdates
flushAnimatedUpdates();طبّق المخرجات المعلّقة بشكل متزامن، للاختبارات الحتمية.
الدليل: القيم والأنماطالمشغّلات والتركيب والخطوط الزمنية
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 />;مساحة اسم مضيفات 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>شارك اسم وضعية وإيقاعًا وإعدادات حركة افتراضية مع عناصر 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 }تنسيق التخطيط نفسه بالالتقاط والاعتماد لمُصيِّرات أخرى.
الدليل: مكوّنات 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)');هل يطابق استعلام الوسائط.
الدليل: الإدخال والإيماءات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.