Animación vectorial en Componer. AnimatedVectorDrawables son un… | Por Anes Abismail | Snap Autos | Febrero de 2022
AnimatedVectorDrawables siempre ha sido una herramienta que puede usar para agregar animaciones a sus aplicaciones, métodos XML y herramientas en línea como cambiador de forma AnimatedVectorDrawables facilita su creación y uso, AnimatedVectorDrawables usa la API de animación de vista, específicamente ObjectAnimator y AnimatorSet, pero si usa Compose y por alguna razón no puede usar XML, ¿puede usar Compose para lograr la misma animación? ¿API de conversión? Veamos un ejemplo e intentemos convertirlo simplemente usando la API Compose.
Para simplificar, usaré una animación simple:
Para lograr esas animaciones que estoy usando transición de actualización Porque estamos animando múltiples valores al mismo tiempo.
la rotación es solo un valor flotante, podemos usar carroza animada Características.
Puedes leer más sobre animaciones morphing aquípero aquí animamos la ruta del vector M 4.8 13.4 L 9 17.6 M 10.4 16.2 L 19.6 7 llegar M 6.4 6.4 L 17.6 17.6 M 6.4 17.6 L 17.6 6.4 Convertirlo a Compose dará como resultado:
PathNodes no son valores simples como la rotación o la traducción, por lo que necesitamos otra forma de animarlos.No sé cómo ObjectAnimator implementa la animación, pero la solución que encontré es interpolar linealmente entre PathNodes con una puntuación de 0 a 1 (0 es el comienzo de la animación, 1 es el final de la animación), puedes leer más sobre la interpolación lineal aquíAquí solo he incluido la interpolación lineal de MoveTo y LineTo PathNodes, pero puedes encontrar implementaciones para el resto aquí.
Ahora la parte de la animación:
Para aplicar la rotación necesitamos un grupo() y mostrar los nodos de ruta que usamos sendero() y pasarle el resultado de la interpolación lineal
Aquí está la implementación completa de la animación:
Esto es lista De todas las propiedades animables de un vector, todas las propiedades son Color, Float o PathNodes, con la implementación anterior, ahora podemos animar todas las propiedades usando Compose Transition API.
Es posible que esta implementación no sea perfecta, así que no dude en comunicarse en Twitter si tiene alguna sugerencia. @anesabmlpuedes encontrar el resto del código aquí.
quiero agradecer Sutton, juhani letimaki, Alejandro Sandur Se utiliza para ver esta publicación de blog.
