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 আর listener।
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? }?)মান আর তার factory-তে ঘোষিত প্রতিটি কন্ট্রোলার, ইনপুট ও আউটপুটের মালিক হন। শুরু করে, নির্ভরতা বদলালে আবার শুরু করে আর পরিষ্কার করে।
গাইড: মান আর স্টাইলuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)একটি পূর্ণ দ্বিমাত্রিক মানের মালিক হন।
গাইড: মান আর স্টাইলuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringcalc() এক্সপ্রেশন নয় এমন উদ্ভূত নোডকে কম্পোনেন্টের জীবনকালসহ নিজস্ব CSS ভেরিয়েবল দিন।
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)নোড বা ValueXY-এর প্রতিটি পরিবর্তনে একটি ফাংশন কল করুন; আনমাউন্টে সরে যায়।
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })হুকভিত্তিক প্রবেশ আর প্রস্থানের জন্য { mounted, animatedValue } ফেরত দিন।
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;নিচের হুক মানগুলোর জন্য ডিফল্ট CSS ভেরিয়েবল scope ঠিক করুন।
গাইড: মান আর স্টাইলflushAnimatedUpdates
flushAnimatedUpdates();নির্ধারণমূলক টেস্টের জন্য অপেক্ষমাণ আউটপুট সিঙ্ক্রোনাসভাবে প্রয়োগ করুন।
গাইড: মান আর স্টাইলDriver, সমন্বয় আর টাইমলাইন
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? }?)নামযুক্ত ট্র্যাকসহ seek-যোগ্য ঘড়ি, React-এর বাইরে।
গাইড: Timing, স্প্রিং আর সমন্বয়useTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)কম্পোনেন্টের নিজস্ব টাইমলাইন, যার ট্র্যাক সরাসরি সাধারণ স্টাইলে কাজ করে।
গাইড: Timing, স্প্রিং আর সমন্বয়কম্পোনেন্ট আর লেআউট
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div-এর মতো HTML আর SVG হোস্টের নেমস্পেস, সঙ্গে React Native নামে মূল ফাংশন।
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref এগিয়ে দেওয়া কম্পোনেন্টকে Animated হোস্ট props গ্রহণ করান।
গাইড: Animated কম্পোনেন্টAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>ভেতরের Animated এলিমেন্টের সঙ্গে pose-এর নাম, tempo আর অ্যানিমেশনের ডিফল্ট ভাগ করুন।
গাইড: Animated কম্পোনেন্টAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>key-যুক্ত children-কে প্রস্থান শেষ না হওয়া পর্যন্ত মাউন্ট রাখুন।
গাইড: Animated কম্পোনেন্টAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move এলিমেন্টের লেআউট পরিবর্তন অ্যানিমেট করুন আর একই পরিচয়ের এলিমেন্ট জুড়ুন।
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }অন্য রেন্ডারারের জন্য একই ক্যাপচার আর commit লেআউট সমন্বয়।
গাইড: Animated কম্পোনেন্টuseReorder
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? })সীমা, স্থিতিস্থাপক প্রান্ত, momentum আর 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 }React-এর বাইরে Animated স্টাইল একটি এলিমেন্টে বাঁধুন; update, inspect আর dispose ফেরত দেয়।
inspect
inspect(element) → [{ property, driver, reason }]এলিমেন্টের প্রতিটি অ্যানিমেটেড প্রপার্টির প্লেব্যাক পথ আর বিকল্প পথের কারণ।
গাইড: পারফরম্যান্স আর প্লেব্যাকoutput
output(targetRef, { style?, attributes?, properties?, text? })useAnimated-এর ভেতরে স্টাইল, অ্যাট্রিবিউট, লেখা বা প্রপার্টি আউটপুটের মালিক হন।
bindOutput
bindOutput(target, mapping) → { flush, dispose }আউটপুট ম্যাপিং সঙ্গে সঙ্গে জুড়ুন; flush আর dispose ফেরত দেয়।