Motion
A value that moves every frame: scroll offsets, gestures, animations.
Read and write .value anywhere. Props and handlers that use a motion value
run on the UI thread when the compiler can place them there, so moving it
never waits for JavaScript and never re-renders a component. Use signal()
for values components react to.
Verwendung
Dismiss and observe the keyboard
Dieser Typ wird verwendet von keyboard.frame
import { Box, Button, Text, VStack, keyboard } from 'kuito';
export default function KeyboardState() {
keyboard.frame.value; // { screenX, screenY, width, height } or null
// In a component, until it unmounts; elsewhere, until remove().
keyboard.watch('didShow', (event) => console.log(event.frame.height, event.duration));
return (
<VStack>
<Text>{keyboard.visible.value ? 'typing' : ''}</Text>
{/* Rides on the keyboard. */}
<Box translateY={keyboard.height.map((height) => -height)} />
<Button onPress={() => keyboard.dismiss()}>Done</Button>
</VStack>
);
}Typdeklaration
export interface Motion<T> {
get value(): T;
/** A value moves there now; an animation (timing, spring, decay, ...) moves it there. */
set value(next: T | Animation<T>);
/**
* Moves with `source` on the UI thread, with no code: a gesture's field
* (`drag.x`), another motion value or a derived one. Null stops it.
*/
follows(source: GestureSource | Readable<T> | null): this;
/** A value computed from this one, on the UI thread. */
map<U>(fn: (value: T) => U): Derived<U>;
}Mitglieder 3
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
value | T | Ja | A value moves there now; an animation (timing, spring, decay, ...) moves it there. |
follows | (source: GestureSource | Readable<T> | null) => Motion<T> | Ja | Moves with source on the UI thread, with no code: a gesture's field
(drag.x), another motion value or a derived one. Null stops it. |
map | <U>(fn: (value: T) => U) => Derived<U> | Ja | A value computed from this one, on the UI thread. |
follows — Methodensignaturen
Signaturen
(source: GestureSource | Readable<T> | null): Motion<T>Parameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
source | GestureSource | Readable<T> | Ja | — |
Rückgabe
Motion<T>
map — Methodensignaturen
Signaturen
<U>(fn: (value: T) => U): Derived<U>Typparameter
| Name | Einschränkung | Standard |
|---|---|---|
U | — | — |
Parameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
fn | (value: T) => U | Ja | — |
Rückgabe
Derived<U>
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.