Imagenes de los valores animados

El flujo de trabajo principal para crear una animación es crear un Animated.Value, engancharlo a uno o más atributos de estilo de un componente animado, y luego conducir las actualizaciones a través de animaciones usando . No modifiques el valor animado directamente. Puedes utilizar el gancho useRef para devolver un objeto ref mutable.

La propiedad actual de este objeto ref se inicializa como el argumento dado y persiste durante todo el ciclo de vida del componente. No modifique el valor animado directamente. Normalmente se almacena como una variable de estado en los componentes de la clase.

Animated.Value puede vincularse a propiedades de estilo u otros props, y también puede interpolarse. Un solo Animated.Value puede manejar cualquier número de propiedades. Animated proporciona tres tipos de animación.

Cada tipo de animación proporciona una curva de animación particular que controla cómo sus valores se animan desde su valor inicial hasta el valor final: En el widget sin estado, StaggerAnimation, la función de construcción instala un AnimatedBuilder-un widget de propósito general para construir animaciones. El AnimatedBuilder construye un widget y lo configura utilizando los valores actuales de los Tweens. El ejemplo crea una función llamada _buildAnimation que realiza las actualizaciones reales de la UI, y la asigna a su propiedad builder.

AnimatedBuilder escucha las notificaciones del controlador de la animación, marcando el árbol de widgets sucio a medida que los valores cambian. Para cada tick de la animación, los valores son actualizados, resultando en una llamada a _buildAnimation. Uno de los objetivos principales de Shared Values, de ahí su nombre, es proporcionar una noción de memoria compartida en Reanimated 2.0. Como habrás aprendido en el artículo sobre worklets, Reanimated 2.0 ejecuta el código de animación en un hilo separado usando un contexto JS VM separado.

Los Valores Compartidos hacen posible mantener una referencia a un dato mutable que puede ser leído y modificado de manera segura a través de esos hilos. Los objetos Shared Value sirven como referencias a trozos de datos compartidos a los que se puede acceder y modificar utilizando su propiedad .value. Es importante recordar que si quieres acceder o actualizar datos compartidos, debes usar la propiedad .value una de las fuentes más comunes de errores en el código de Reanimated 2, es esperar que la referencia Shared Value devuelva los datos en lugar de acceder a la propiedad .value de los mismos.

Con el fin de proporcionar formas seguras y rápidas de acceder a los datos compartidos a través de dos hilos, tuvimos que hacer algunas concesiones al diseñar los Valores Compartidos. Como, durante las animaciones, las actualizaciones ocurren la mayor parte del tiempo en el hilo de la interfaz de usuario, los valores compartidos están optimizados para ser actualizados y leídos desde el hilo de la interfaz de usuario. Por lo tanto, las lecturas y escrituras realizadas desde el hilo de la interfaz de usuario son todas sincrónicas, lo que significa que cuando se ejecuta desde un worklet en el hilo de la interfaz de usuario, se puede actualizar el valor y esperar que se actualice inmediatamente después de esa llamada.

La consecuencia de esta elección es que las actualizaciones realizadas en el hilo JS de React Native son todas asíncronas. En lugar de que esas actualizaciones sean inmediatas en ese caso, el núcleo de Reanimated programa la actualización para que se realice en el hilo de la interfaz de usuario, evitando así cualquier problema de concurrencia. Cuando accedemos y actualizamos valores compartidos desde el hilo JS de React Native, es mejor pensar en ello como si el valor funcionara de la misma manera que el estado de React.

Podemos hacer actualizaciones al estado, pero las actualizaciones no son inmediatas, y para leer los datos tenemos que esperar hasta el siguiente re-render. Para crear una referencia a un valor compartido, debemos utilizar el gancho useSharedValue: A continuación modificaremos el animatedValue cuando nos haya gustado la imagen. Para ello modificaremos el método toggleLike.

Si la imagen nos gusta iniciaremos una secuencia animada que lleva a this.animatedValue a un valor de 1 e inmediatamente lo devuelve a 0. Voy a usar porque me gusta como queda aquí. Lo último que haremos es modificar el método renderOverlay para que utilice nuestro valor animado para modificar los estilos.

En primer lugar, sustituiremos el componente Image por un Animated.Image para que podamos utilizar valores animados y el componente sepa qué hacer con ellos. A continuación, vamos a establecer una matriz de nuestros nuevos estilos de imagen. Primero será nuestro styles.overlayHeart existente, después será un objeto con nuestros estilos dinámicos.

La opacidad es un valor de 0 a 1, así que podemos pasarla directamente a opacidad. Luego usaremos la propiedad scale para comenzar la imagen ligeramente más pequeña y escalarla más grande. Podemos especificar los valores exactos utilizando this.animatedValue.interpolate.

Este es el código. Esto nos deja con lo siguiente. El tipo AnimatedImage extiende las características del tipo Image, proporcionando una forma de reproducir animaciones almacenadas como imágenes que contienen una serie de fotogramas, como las almacenadas en archivos GIF.

Se puede obtener información sobre el fotograma actual y la duración total de la animación mediante las propiedades currentFrame y frameCount. Se puede iniciar, pausar y detener la animación cambiando los valores de las propiedades playing y paused. El siguiente QML muestra cómo mostrar una imagen animada y obtener información sobre su estado, como el