Value
new Value(initial: number)Một số có thể thay đổi với setValue, setOffset, flattenOffset, extractOffset, stopAnimation và resetAnimation.
Tham chiếu API
Mọi export của @kkwaenggwari/animated, kèm chữ ký và hướng dẫn giải thích nó.
Giá trị và đồ thị
ValueXY
new ValueXY({ x?, y? })Cặp giá trị x và y với cùng các thao tác, cộng thêm getLayout và getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Tạo một số hoặc bản ghi số có tên bên ngoài React. Việc tạo không khởi động gì.
Hướng dẫn: Giá trị và kiểu dángAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Nền tảng chỉ đọc của mọi giá trị và đồ thị: getValue, interpolate và listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Ánh xạ sống từ khoảng đầu vào sang khoảng đầu ra, với easing và ngoại suy extend, clamp hoặc identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Phép tính thuần, chỉ đọc trên một hoặc nhiều đầu vào. Đầu ra dùng nó chạy trong JavaScript.
Hướng dẫn: Giá trị và kiểu dánginterpolateFn
interpolateFn({ value, inputRange, outputRange });Tính một phép nội suy một lần cho một số thông thường.
Hướng dẫn: Giá trị và kiểu dángadd
add(...inputs);Tổng của các số và giá trị.
Hướng dẫn: Giá trị và kiểu dángsubtract
subtract(a, b);Hiệu của hai đầu vào.
Hướng dẫn: Giá trị và kiểu dángmultiply
multiply(...inputs);Tích của các số và giá trị.
Hướng dẫn: Giá trị và kiểu dángdivide
divide(a, b);Thương của hai đầu vào.
Hướng dẫn: Giá trị và kiểu dángmodulo
modulo(a, b);Giá trị quay vòng, ví dụ cho vòng xoay vô tận.
Hướng dẫn: Giá trị và kiểu dángdiffClamp
diffClamp(input, min, max);Bám theo thay đổi của đầu vào nhưng giữ trong một khoảng; hữu ích cho thanh đầu trang ẩn khi cuộn.
Hướng dẫn: Giá trị và kiểu dángHook React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Sở hữu một số hoặc bản ghi số suốt vòng đời component. Trong style, nó là một biến CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Sở hữu giá trị cùng mọi bộ điều khiển, đầu vào và đầu ra khai báo trong factory. Khởi động, chạy lại khi phụ thuộc đổi và dọn dẹp.
Hướng dẫn: Giá trị và kiểu dánguseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Sở hữu một giá trị hai chiều hoàn chỉnh.
Hướng dẫn: Giá trị và kiểu dánguseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringCấp cho nút suy ra không phải biểu thức calc() một biến CSS riêng, với vòng đời của component.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Gọi một hàm ở mỗi thay đổi của nút hoặc ValueXY; được gỡ khi unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Trả về { mounted, animatedValue } cho vào và ra dựa trên hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Đặt scope biến CSS mặc định cho các giá trị hook bên dưới.
Hướng dẫn: Giá trị và kiểu dángflushAnimatedUpdates
flushAnimatedUpdates();Áp dụng đồng bộ đầu ra đang chờ, cho test tất định.
Hướng dẫn: Giá trị và kiểu dángDriver, phối hợp và timeline
timing
timing(value, { toValue, duration?, delay?, easing? })Di chuyển giá trị theo một đường cong easing trong thời lượng cố định.
Hướng dẫn: Timing, lò xo và phối hợpspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Di chuyển giá trị bằng vật lý lò xo, giữ vận tốc của chuyển động bị ngắt.
Hướng dẫn: Timing, lò xo và phối hợpdecay
decay(value, { velocity, deceleration? })Bắt đầu với một vận tốc rồi chậm dần.
Hướng dẫn: Timing, lò xo và phối hợpdelay
delay(ms);Một bộ điều khiển chỉ chờ.
Hướng dẫn: Timing, lò xo và phối hợpsequence
sequence([a, b, c]);Chạy các bộ điều khiển lần lượt.
Hướng dẫn: Timing, lò xo và phối hợpparallel
parallel([a, b], { stopTogether? }?)Chạy các bộ điều khiển cùng lúc.
Hướng dẫn: Timing, lò xo và phối hợpstagger
stagger(ms, [a, b, c]);Khởi động các bộ điều khiển lần lượt với khoảng cách cố định.
Hướng dẫn: Timing, lò xo và phối hợploop
loop(animation, { iterations?, resetBeforeIteration? }?)Lặp một bộ điều khiển vài lần hoặc mãi mãi.
Hướng dẫn: Timing, lò xo và phối hợpkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Đưa một giá trị qua nhiều số, với thời điểm và số lần lặp tùy chọn.
Hướng dẫn: Timing, lò xo và phối hợpEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Các đường cong khớp với React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier và các hàm hỗ trợ in/out.
Hướng dẫn: Timing, lò xo và phối hợpcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Đồng hồ có thể tua với các track có tên, bên ngoài React.
Hướng dẫn: Timing, lò xo và phối hợpuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Timeline thuộc về component với các track hoạt động trực tiếp trong style thông thường.
Hướng dẫn: Timing, lò xo và phối hợpComponent và bố cục
Animated
<Animated.div seed pose tempo respond depart move />;Namespace của các host HTML và SVG như Animated.div, cùng các hàm cốt lõi dưới tên của React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Giúp một component chuyển tiếp ref nhận các props của host Animated.
Hướng dẫn: Component AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Chia sẻ tên pose, tempo và mặc định hoạt ảnh với các phần tử Animated bên trong.
Hướng dẫn: Component AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Giữ children có key được gắn cho đến khi việc rời đi kết thúc.
Hướng dẫn: Component AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Tạo hoạt ảnh cho thay đổi bố cục của phần tử move và nối các phần tử cùng danh tính.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Cùng cơ chế phối hợp capture và commit bố cục cho các renderer khác.
Hướng dẫn: Component AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Sắp xếp lại danh sách có kiểm soát dọc một trục bằng con trỏ và bàn phím.
Hướng dẫn: Component AnimatedĐầu vào và kết nối
input
input(targetRef, adapter, onEvent?)Gắn một adapter đầu vào vào phần tử như một bộ điều khiển được sở hữu.
Hướng dẫn: Đầu vào và cử chỉfollow
follow(target, source, { stiffness?, damping?, mass? }?)Khiến một giá trị đuổi theo giá trị khác bằng lò xo.
Hướng dẫn: Đầu vào và cử chỉconnect
connect(node, (value) => write(value));Gửi mọi thay đổi của một nút đến một hàm.
Hướng dẫn: Đầu vào và cử chỉevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Ánh xạ dữ liệu sự kiện lồng nhau vào giá trị, như trong React Native.
Hướng dẫn: Đầu vào và cử chỉdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Kéo bằng con trỏ và bàn phím với giới hạn, mép đàn hồi, quán tính và settle.
Hướng dẫn: Đầu vào và cử chỉpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Tỉ lệ và góc xoay từ cử chỉ hai con trỏ.
Hướng dẫn: Đầu vào và cử chỉmoveInput
moveInput({ x?, y?, relative?, reset? })Tọa độ con trỏ, có thể tương đối so với tâm phần tử.
Hướng dẫn: Đầu vào và cử chỉscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Vị trí và tiến độ cuộn của một phần tử, của trang, hoặc của phần tử đi ngang khung nhìn.
Hướng dẫn: Đầu vào và cử chỉwheelInput
wheelInput({ x?, y? })Độ lệch con lăn.
Hướng dẫn: Đầu vào và cử chỉviewportInput
viewportInput({ root?, margin?, amount?, once? })Phần tử có nằm trong khung nhìn hay không.
Hướng dẫn: Đầu vào và cử chỉmediaInput
mediaInput('(min-width: 768px)');Media query có khớp hay không.
Hướng dẫn: Đầu vào và cử chỉlongPressInput
longPressInput({ delay?, threshold? })Con trỏ được giữ sau một độ trễ và trong ngưỡng di chuyển.
Hướng dẫn: Đầu vào và cử chỉswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Hướng, khoảng cách và vận tốc vuốt.
Hướng dẫn: Đầu vào và cử chỉĐầu ra và chẩn đoán
bind
bind(element, style) → { update, inspect, dispose }Gắn style Animated vào một phần tử bên ngoài React; trả về update, inspect và dispose.
inspect
inspect(element) → [{ property, driver, reason }]Đường phát và lý do fallback của từng thuộc tính có hoạt ảnh trên một phần tử.
Hướng dẫn: Hiệu năng và cách phátoutput
output(targetRef, { style?, attributes?, properties?, text? })Sở hữu một đầu ra kiểu dáng, thuộc tính HTML, văn bản hoặc thuộc tính bên trong useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Gắn ngay một ánh xạ đầu ra; trả về flush và dispose.