Saltar al contenido principal
Versión: 0.78

Suavizado

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

El módulo Easing implementa funciones de suavizado comunes. Este módulo es utilizado por Animated.timing() para crear movimientos físicamente creíbles en animaciones.

Puedes encontrar una visualización de funciones de suavizado comunes en https://easings.net/

Animaciones predefinidas​

El módulo Easing proporciona varias animaciones predefinidas mediante estos métodos:

  • back crea una animación básica donde el objeto retrocede ligeramente antes de avanzar

  • bounce proporciona una animación con efecto rebote

  • ease ofrece una animación inercial básica

  • elastic crea una interacción básica tipo resorte

Funciones estándar​

Se proporcionan tres funciones de suavizado estándar:

La función poly permite implementar funciones de mayor potencia como cuárticas, quínticas y superiores.

Funciones adicionales​

Estos métodos proporcionan funciones matemáticas adicionales:

  • bezier implementa una curva de Bézier cúbica

  • circle proporciona una función circular

  • sin ofrece una función sinusoidal

  • exp implementa una función exponencial

Los siguientes helpers modifican otras funciones de suavizado:

  • in ejecuta una función de suavizado en dirección normal (hacia adelante)

  • inOut hace simétrica cualquier función de suavizado

  • out ejecuta una función de suavizado en reversa (hacia atrás)

Ejemplo​

Referencia

Métodos​

step0()​

tsx
static step0(n: number);

Función escalonada que devuelve 1 para cualquier valor positivo de n.

step1()​

tsx
static step1(n: number);

Función escalonada que devuelve 1 si n es mayor o igual a 1.

linear()​

tsx
static linear(t: number);

Función lineal f(t) = t. La posición se correlaciona directamente con el tiempo transcurrido.

https://cubic-bezier.com/#0,0,1,1

ease()​

tsx
static ease(t: number);

Interacción inercial básica, similar a un objeto que acelera gradualmente.

https://cubic-bezier.com/#.42,0,1,1

quad()​

tsx
static quad(t: number);

Función cuadrática f(t) = t * t. La posición iguala el cuadrado del tiempo transcurrido.

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

Función cúbica f(t) = t * t * t. La posición iguala el cubo del tiempo transcurrido.

https://easings.net/#easeInCubic

poly()​

tsx
static poly(n: number);

Función potencial donde la posición equivale a la N-ésima potencia del tiempo transcurrido.

n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint

sin()​

tsx
static sin(t: number);

Función sinusoidal.

https://easings.net/#easeInSine

circle()​

tsx
static circle(t: number);

Una función circular.

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

Una función exponencial.

https://easings.net/#easeInExpo

elastic()​

tsx
static elastic(bounciness: number);

Una interacción elástica básica, similar a un resorte oscilante.

La elasticidad predeterminada es 1, que produce un ligero rebase. Elasticidad 0 no rebasa, y N > 1 rebasa aproximadamente N veces.

https://easings.net/#easeInElastic

back()​

tsx
static back(s)

Úsalo con Animated.parallel() para crear un efecto donde el objeto retrocede ligeramente al iniciar la animación.

bounce()​

tsx
static bounce(t: number);

Proporciona un efecto de rebote básico.

https://easings.net/#easeInBounce

bezier()​

tsx
static bezier(x1: number, y1: number, x2: number, y2: number);

Proporciona una curva bezier cúbica, equivalente a transition-timing-function en CSS Transitions.

Puedes visualizar curvas bezier en https://cubic-bezier.com/

in()​

tsx
static in(easing: number);

Ejecuta una función de easing hacia adelante.

out()​

tsx
static out(easing: number);

Ejecuta una función de easing en reversa.

inOut()​

tsx
static inOut(easing: number);

Hace simétrica cualquier función de easing. Se ejecuta hacia adelante en la primera mitad y en reversa en la segunda mitad.