Animated.Value

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 →

Valor estándar para controlar animaciones. Un Animated.Value puede controlar múltiples propiedades de forma sincronizada, pero solo puede ser manejado por un mecanismo a la vez. Al usar un nuevo mecanismo (ej. iniciar una nueva animación o llamar a setValue), se detendrán los mecanismos anteriores.

Normalmente se inicializa con useAnimatedValue(0); o new Animated.Value(0); en componentes de clase.

---

Referencia

Métodos

setValue()

tsx

setValue(value: number);

Establece el valor directamente. Esto detiene cualquier animación en curso sobre el valor y actualiza todas las propiedades vinculadas.

Parámetros:

Name	Type	Required	Description
value	number	Yes	Value

---

setOffset()

tsx

setOffset(offset: number);

Establece un desplazamiento que se aplica sobre cualquier valor configurado, ya sea mediante setValue, una animación o Animated.event. Útil para compensar elementos como el inicio de un gesto de arrastre.

Parámetros:

Name	Type	Required	Description
offset	number	Yes	Offset value

---

flattenOffset()

tsx

flattenOffset();

Combina el valor del desplazamiento con el valor base y restablece el desplazamiento a cero. El valor de salida final permanece inalterado.

---

extractOffset()

tsx

extractOffset();

Establece el valor del desplazamiento como valor base y restablece el valor base a cero. El valor de salida final permanece inalterado.

---

addListener()

tsx

addListener(callback: (state: {value: number}) => void): string;

Añade un listener asíncrono al valor para observar actualizaciones de animaciones. Es útil porque no existe forma de leer el valor de forma síncrona, ya que podría estar controlado nativamente.

Devuelve una cadena que sirve como identificador del listener.

Parámetros:

Name	Type	Required	Description
callback	function	Yes	The callback function which will receive an object with a value key set to the new value.

---

removeListener()

tsx

removeListener(id: string);

Elimina un listener registrado. El parámetro id debe coincidir con el identificador devuelto previamente por addListener().

Parámetros:

Name	Type	Required	Description
id	string	Yes	Id for the listener being removed.

---

removeAllListeners()

tsx

removeAllListeners();

Elimina todos los listeners registrados.

---

stopAnimation()

tsx

stopAnimation(callback?: (value: number) => void);

Detiene cualquier animación o seguimiento en curso. Se invoca el callback con el valor final tras detener la animación, útil para actualizar el estado y que coincida con la posición de la animación en el diseño.

Parámetros:

Name	Type	Required	Description
callback	function	No	A function that will receive the final value.

---

resetAnimation()

tsx

resetAnimation(callback?: (value: number) => void);

Detiene cualquier animación y restablece el valor a su estado original.

Parámetros:

Name	Type	Required	Description
callback	function	No	A function that will receive the original value.

---

interpolate()

tsx

interpolate(config: InterpolationConfigType);

Interpola el valor antes de actualizar la propiedad, ej. mapeando de 0-1 a 0-10.

Ver AnimatedInterpolation.js

Parámetros:

Name	Type	Required	Description
config	object	Yes	See below.

El objeto config está compuesto por las siguientes claves:

• inputRange: un array de números

• outputRange: un array de números o cadenas

• easing (opcional): función que devuelve un número dado un número de entrada

• extrapolate (opcional): cadena como 'extend', 'identity' o 'clamp'

• extrapolateLeft (opcional): cadena como 'extend', 'identity' o 'clamp'

• extrapolateRight (opcional): cadena como 'extend', 'identity' o 'clamp'

---

animate()

tsx

animate(animation, callback);

Normalmente solo se usa internamente, pero podría ser utilizado por una clase de animación personalizada.

Parámetros:

Name	Type	Required	Description
animation	Animation	Yes	See Animation.js.
callback	function	Yes	Callback function.