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 และ listener
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })การจับคู่ที่มีชีวิตจากช่วงอินพุตไปยังช่วงผลลัพธ์ พร้อม easing และ extrapolation แบบ 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 hook
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)ถือครองตัวเลขหรือเรคคอร์ดตัวเลขตลอดอายุคอมโพเนนต์ ใน style มันคือตัวแปร CSS
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)ถือครองค่าพร้อมตัวควบคุม อินพุต และผลลัพธ์ทุกตัวที่ประกาศใน factory เริ่ม เริ่มใหม่เมื่อ dependency เปลี่ยน และเก็บกวาด
คู่มือ: ค่าและสไตล์useAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)ถือครองค่าสองมิติที่สมบูรณ์
คู่มือ: ค่าและสไตล์useAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringให้โหนดที่สร้างขึ้นซึ่งไม่ใช่นิพจน์ calc() มีตัวแปร CSS ของตัวเอง โดยมีอายุเท่าคอมโพเนนต์
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)เรียกฟังก์ชันทุกครั้งที่โหนดหรือ ValueXY เปลี่ยน ถูกนำออกเมื่อ unmount
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })คืน { mounted, animatedValue } สำหรับการเข้าและออกแบบใช้ hook
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;กำหนด scope ของตัวแปร CSS เริ่มต้นให้ค่า hook ข้างใต้
คู่มือ: ค่าและสไตล์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? }?)นาฬิกาที่เลื่อนตำแหน่งได้พร้อมแทร็กที่มีชื่อ นอก React
คู่มือ: Timing สปริง และการประกอบuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)ไทม์ไลน์ที่เป็นของคอมโพเนนต์ ซึ่งแทร็กใช้ในสไตล์ธรรมดาได้โดยตรง
คู่มือ: 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>แชร์ชื่อ pose, tempo และค่าเริ่มต้นของแอนิเมชันกับองค์ประกอบ Animated ข้างใน
คู่มือ: คอมโพเนนต์ AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>เก็บ children ที่มี key ให้ mount อยู่จนการออกจบ
คู่มือ: คอมโพเนนต์ AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>ทำให้การเปลี่ยนเลย์เอาต์ขององค์ประกอบ move เคลื่อนไหว และเชื่อมองค์ประกอบที่มีตัวตนเดียวกัน
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }การประสาน capture และ commit ของเลย์เอาต์แบบเดียวกันสำหรับ renderer อื่น
คู่มือ: คอมโพเนนต์ 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