easing — Kuito Dokumentation

Verwendung

Ease a panel into place over a fixed duration.

tsx

// Ease a panel into place over a fixed duration.
import { Box, Button, VStack, easing, motion, timing } from 'kuito';

export function Panel() {
  const x = motion(0);
  return (
    <VStack>
      <Button onPress={() => (x.value = timing({ duration: 250, easing: easing.out }).to(120))}>
        Move
      </Button>
      <Box translateX={x} width={80} height={80} backgroundColor="#2563eb" />
    </VStack>
  );
}

Eigenschaften und Methoden 6

Name	Typ	Erforderlich	Beschreibung
`linear`	`CubicBezier`	Ja	—
`ease`	`CubicBezier`	Ja	—
`in`	`CubicBezier`	Ja	— Standard: `easeIn`
`out`	`CubicBezier`	Ja	— Standard: `easeOut`
`inOut`	`CubicBezier`	Ja	— Standard: `easeInOut`
`bezier`	`(x1: number, y1: number, x2: number, y2: number) => CubicBezier`	Ja	—

bezier — Methodensignaturen

Signaturen

(x1: number, y1: number, x2: number, y2: number): CubicBezier

Parameter

Name	Typ	Erforderlich	Beschreibung
`x1`	`number`	Ja	—
`y1`	`number`	Ja	—
`x2`	`number`	Ja	—
`y2`	`number`	Ja	—

Rückgabe

CubicBezier

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.