Utilização

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>
  );
}

Propriedades e métodos 6

NomeTipoObrigatórioDescrição
linearCubicBezierSim—
easeCubicBezierSim—
inCubicBezierSim—
Predefinição: easeIn
outCubicBezierSim—
Predefinição: easeOut
inOutCubicBezierSim—
Predefinição: easeInOut
bezier(x1: number, y1: number, x2: number, y2: number) => CubicBezierSim—
bezier — assinaturas de método

Assinaturas

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

Parâmetros

NomeTipoObrigatórioDescrição
x1numberSim—
y1numberSim—
x2numberSim—
y2numberSim—

Devolve

CubicBezier

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.