easing
Cubic-bezier curves, the same data the CSS compiler emits for transition.
Utilização
Ease a panel into place over a fixed duration.
// 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
| Nome | Tipo | Obrigatório | Descrição |
|---|---|---|---|
linear | CubicBezier | Sim | — |
ease | CubicBezier | Sim | — |
in | CubicBezier | Sim | — Predefinição: easeIn |
out | CubicBezier | Sim | — Predefinição: easeOut |
inOut | CubicBezier | Sim | — Predefinição: easeInOut |
bezier | (x1: number, y1: number, x2: number, y2: number) => CubicBezier | Sim | — |
bezier — assinaturas de método
Assinaturas
(x1: number, y1: number, x2: number, y2: number): CubicBezierParâmetros
| Nome | Tipo | Obrigatório | Descrição |
|---|---|---|---|
x1 | number | Sim | — |
y1 | number | Sim | — |
x2 | number | Sim | — |
y2 | number | Sim | — |
Devolve
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.