Dibujo y animación de gráficos vectoriales en desarrollo Android.

Los gráficos vectoriales también se denominan imágenes orientadas a objetos o imágenes de dibujo. Son gráficos dibujados en función de características geométricas. En el desarrollo de Android, los gráficos vectoriales se pueden utilizar para reemplazar los recursos de imagen originales. de ocupar poco espacio. Y la ventaja de poder escalar a voluntad sin distorsión, lo he utilizado en muchos de mis proyectos.

A través del estudio y la práctica, he resumido algunos conocimientos relacionados con los gráficos vectoriales para facilitar un mejor uso de los gráficos vectoriales en el futuro, y también para referencia de todos.

Antes de dibujar gráficos vectoriales, debe definir el ancho y el alto del lienzo. Los efectos de dibujo posteriores se mostrarán en este lienzo. Las coordenadas que se deben ingresar durante el proceso de dibujo son los puntos en el lienzo.

Los gráficos vectoriales de Android se encuentran comúnmente en la carpeta dibujable. Es un archivo xml envuelto por una etiqueta vectorial. La etiqueta vectorial puede contener varias etiquetas de ruta, que se muestran en secuencia.

Lo más importante en los gráficos vectoriales es el atributo de ruta. El estilo de la imagen se dibuja a partir de los datos en el atributo de ruta. Estos datos se combinan mediante diferentes comandos. Aquí hay una introducción al dibujo. algunos gráficos vectoriales.

Conecte los ejemplos de comandos anteriores para generar una imagen completa, que puede verse así:

El tamaño del lienzo es 500x500 y los vértices del gráfico son 200, 10. La ubicación es también el punto de partida para que comencemos a dibujar. Puede comprender mejor cada comando de dibujo a través de esta imagen.

Puedes agregar efectos de animación a imágenes vectoriales en Android, para que los usuarios puedan ver una imagen en movimiento, lo que puede mejorar el efecto interactivo de la aplicación hasta cierto punto. La animación vectorial es un cambio dentro de los gráficos, que puede lograr efectos que no se pueden lograr con Ver animación.

Este tipo de animación está dirigida al valor del campo de ruta en la imagen vectorial, y el efecto de animación se logra cambiando continuamente el valor del campo de ruta.

Nota: El AnimatedVectorDrawable requerido para la animación pathData requiere un nivel API mínimo de 25

La implementación de una animación vectorial requiere los siguientes pasos:

1. Prepárese para comenzar Dos diagramas vectoriales de estados y estados finales.

2. Cree un archivo de configuración de animación.

3. Crea archivos vectoriales animados.

4. Inicia la animación.

Basado en este requisito, preparé dos diagramas vectoriales:

Lo que controla la animación es un objectAnimator. También es posible envolver el objectAnimator en un conjunto. Simplemente ejecute este archivo de animación.

duración se utiliza para especificar la duración de la animación.

Los datos de ruta en nombre de propiedad se refieren a los datos de ruta en la imagen vectorial.

Uno de valueFrom y valueTo es la ruta inicial y el otro es la ruta final. Se puede imaginar que esta animación modifica continuamente pathData para lograr el efecto de mostrar animación. Los valores de valueFrom y valueTo se copian directamente de la imagen vectorial previamente preparada, por lo que lo único útil en la imagen vectorial de estado final es el atributo pathData. No importa si no tienes ese archivo.

valueType pathType debe completarse aquí, que es un tipo especialmente utilizado para calcular la ruta.

En este momento, la capa más externa del archivo está envuelta por un vector animado y es necesario agregar un parámetro de diseño. Este elemento de diseño se usa para especificar a qué imagen vectorial se debe aplicar la animación. desea cambiar del estado no habilitado al estado habilitado, por lo que la animación comienza en el estado no habilitado y el estado no habilitado se muestra cuando la animación no ha comenzado. Aquí especificamos @drawable/icon_filter_off .

Hay una etiqueta de destino en su interior. Puede haber varias etiquetas, correspondientes a diferentes animaciones, pero solo se puede aplicar una animación a la misma ruta. El nombre

se utiliza para especificar la ruta para realizar la animación. estado es el nombre que asignamos a la ruta del pequeño icono en la esquina inferior derecha. La animación

se utiliza para especificar la animación que debe ejecutarse. Aquí hay una referencia al recurso de animación que acabamos de crear @animator/filter_turn_on.

Después de crear la imagen vectorial animada, los recursos a los que se hace referencia en la página ya no son las imágenes vectoriales estáticas anteriores. Necesitamos reemplazar la imagen ImageView con @drawable/animated_filter_on

Después. Después de tantos pasos, finalmente hicimos una animación vectorial y fue un. Para ser honesto, es un poco agotador. Sin embargo, mi conjunto de animaciones de cambio de estado requiere dos, así que agregué una animación de retorno y el vector de animación correspondiente, seis archivos, y completé las dos animaciones de cambio de estado. Esta sigue siendo una forma relativamente simple de implementarla. Para la animación de cambiar entre dos estados, hay otra forma de usar un selector en Internet. Esta forma es más problemática y el método de uso no es más simple, así que mi elección. Es cuando necesito cambiar de estado. Cambiar el recurso de imagen de ImageView antes de realizar la animación.

La animación trimPath equivale a cambiar la posición del dibujo vectorial, ya sea para comenzar a dibujar desde el principio o desde la posición 80, y luego modificar dinámicamente el porcentaje para lograr el efecto de animación. No es tan difícil de entender.

Permítanme primero poner un efecto de carga que hice usando la animación trimPath. Este efecto de animación lo uso en LoadingDialog. Esta animación se reproducirá repetidamente cuando se cargue la interfaz.

android: name="load" No hace falta decir que este es el nombre de la ruta cuando hacemos animación. Para aclarar la ruta del ECG, configuré el ancho del trazo en 20 (android:strokeWidth="20") y también configuré el color del trazo para mostrarlo. Los siguientes android:trimPathStart="0" y android:trimPathEnd="0" son el foco de esta animación trimPath.

Estas dos propiedades se establecen en 0 porque el cuadro inicial de la animación es 0, y luego las dos propiedades se cambian lentamente a 1 a través de objectAnimator, de modo que se forma una animación que crece lentamente.

El ejemplo de convertir una línea horizontal en un botón de búsqueda en Internet es aplicar estos dos atributos a dos rutas respectivamente, y yo apliqué ambos atributos a una ruta al mismo tiempo. El principio es el mismo. de.

En el archivo de configuración, configuro ambas animaciones en 3 segundos y las reproduzco en un bucle. La animación en el punto inicial es 1 segundo más lenta que la animación en el punto final, logrando el efecto de solo dibujar. un segmento de línea con un intervalo de 1 segundo en el medio.

La diferencia con la animación de deformación de ruta es Android: valueType="floatType", solo necesitamos calcular el número de 0 a 1 y luego aplicarlo a los campos trimPathStart y trimPathEnd. En este punto, la animación de carga está configurada.

No hay nada que decir sobre este paso, es establecer una animación específica en la ruta especificada en la imagen vectorial especificada.

Después de unos días de estudio, domino aproximadamente la visualización de gráficos vectoriales y la producción de animaciones. Sin embargo, este proceso es relativamente costoso y es un proceso de producción de animación estilo programador. Además de los costes de producción, los costes creativos también son bastante elevados. Una buena idea puede mejorar mucho la experiencia del usuario, pero muchas veces es complicado hacer realidad nuestras ideas. Espero que se puedan lograr algunos efectos mejores en el futuro para que los usuarios se sientan más cómodos de usar.

SVG: la animación SVG más simple

Descripción de sintaxis y lógica de cálculo del comando arco (A) en ruta SVG (ruta)

Gráficos vectoriales de Android

Animación avanzada de Android (2)