easing
Cubic-bezier curves, the same data the CSS compiler emits for transition.
Utilisation
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>
);
}Propriétés et méthodes 6
| Nom | Type | Requis | Description |
|---|---|---|---|
linear | CubicBezier | Oui | — |
ease | CubicBezier | Oui | — |
in | CubicBezier | Oui | — Par défaut: easeIn |
out | CubicBezier | Oui | — Par défaut: easeOut |
inOut | CubicBezier | Oui | — Par défaut: easeInOut |
bezier | (x1: number, y1: number, x2: number, y2: number) => CubicBezier | Oui | — |
bezier — signatures de méthode
Signatures
(x1: number, y1: number, x2: number, y2: number): CubicBezierParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
x1 | number | Oui | — |
y1 | number | Oui | — |
x2 | number | Oui | — |
y2 | number | Oui | — |
Retourne
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.