Animated.ValueXY

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 2D para controlar animaciones bidimensionales, como gestos de arrastre. API casi idéntica a Animated.Value normal, pero multiplexada. Internamente contiene dos Animated.Value regulares.

Ejemplo

---

Referencia

Métodos

setValue()

tsx

setValue(value: {x: number; y: 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	{x: number; y: number}	Yes	Value

---

setOffset()

tsx

setOffset(offset: {x: number; y: 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	{x: number; y: 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: (value: {x: number; y: number}) => void);

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: {x: number; y: 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: {x: number; y: 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.

---

getLayout()

tsx

getLayout(): {left: Animated.Value, top: Animated.Value};

Convierte {x, y} en {left, top} para usar en estilos, ej.:

tsx

style={this.state.anim.getLayout()}

---

getTranslateTransform()

tsx

getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

Convierte {x, y} en una transformación de traducción utilizable, ej.:

tsx

style={{
  transform: this.state.anim.getTranslateTransform()
}}