Biblioteca de animación de Vector Master para Android según Kumarikaveeta Octubre de 2020

La biblioteca Vector Master introduce control dinámico sobre dibujos vectoriales. Cada aspecto del dibujo vectorial se puede controlar de forma dinámica (a través de instancias de Java)usando esta biblioteca.

  • administración : Controla cada atributo relacionado con path, group, vector y clip-path como color, alfa, zdvihWdith, Traducción, escala, rotación etc.
  • Trazados de recorte : La biblioteca admite rutas de clip.
  • Guarnición : La biblioteca le permite recortar la ruta usando trimEnd, trimStart y trimOffset parámetros.

Simplemente agregue la siguiente dependencia a la aplicación build.gradle

  • adicciones {
  • compilación ‘com.sdsmdg.harjot: vectormaster: 1.1.3’
  • }

VectorDrawables son realmente útiles para solucionar problemas de escalado, pero carecen de control. La mayoría de los cambios en los dibujos vectoriales solo son posibles mediante la creación. AnimatedVectorDrawable y también definiendo animaciones. Todo esto es bueno, pero carece del control que puede ser necesario en tiempo de ejecución.

Por ejemplo, si nmied para cambiar las propiedades del vector (Decir color) basado en la acción del usuario (Digamos si el usuario elige el tema de la aplicación). Podemos lograr esto con AnimatedVectorDrawable pero solo hasta cierto punto este enfoque no se puede utilizar si la acción del usuario conduce a un número infinito de casos (Digamos si el usuario selecciona un color de tema aleatorio) y necesitamos cambiar la propiedad del vector para cada caso. Por lo tanto, necesitamos un mecanismo que pueda usarse para cambiar las propiedades de un vector en tiempo de ejecución usando métodos básicos como setColor, setScale, setTranslation etc. De aquí es de donde viene esta biblioteca.

La biblioteca Vector Master funciona de la siguiente manera:

  • primero vector.xml(en adelante VectorDrawable que queremos controlar), se analiza usando XmlPullParser y los atributos se almacenan en los modelos correspondientes a la marca.
  • vector los atributos se almacenan en VectorModel, group atributos v GroupModel, path atributos en PathModel y clip-path atributos v ClipPathModel. La jerarquía es la siguiente:
  • los pathData en PathModel luego se analiza usando PathParser.java; Analiza datos de cadenas y los convierte a Pathobjeto.
  • Todas las transformaciones, escalas, etc. se realizan utilizando Nuez después Path el objeto está construido. Todo esto sucede antes del primer dibujo en el lienzo.
  • Cuando dibujamos por primera vez, tenemos el mismo resultado que tendríamos si usáramos los métodos incorporados para dibujar vector.xml utilizar srcCompat.
  • Ahora se puede acceder a todos los modelos a través de getModelByName(...) métodos públicos que se pueden llamar directamente a través de una instancia VectorMasterView que usamos findViewById(...).
  • Si queremos cambiar algún valor, simplemente llame model.setParamter(...). model es de tipo VectorModel, GroupModel, PathModel o ClipPathModel. parameter puede ser cualquier cosa como color, escala, rotación etc. dependiendo del modelo que utilicemos.
  • Después de configurar el parámetro es necesario paints y paths se reconstruyen, reducen, transforman, etc.
  • Llamar a update el método vuelve a dibujar el lienzo con los cambios necesarios.

Vea también esto:

Nota: ic_heart.xml (Este es el vector original que se usó en todos los ejemplos)

  • <vector xmlns: android = ”http://schemas.android.com/apk/res/android«
  • android: ancho = «24 dp»
  • android: altura = «24 dp»
  • Android: viewportWidth = «24.0»
  • android: viewportHeight = ”24.0″>
  • <cesta
  • android: name = «esquema»
  • Android: pathData = ”M20.84,4.61a5.5,5,5 0,0 0, -7,78 0L12,5,67l-1,06, -1,06a5,5,5,5 0,0 0 , -7.78 7.78 l1.06,1.06L12, 21.23 l7.78, -7.78 1.06, -1.06a5.5.5.5 0.0 0.0 -7.78z «
  • Android: strokeLineCap = «round»
  • android: strokeColor = ”# 5D5D5D”
  • android: fillColor = ”# 00000000”
  • android: strokeWidth = «2»
  • android: strokeLineJoin = «round» />
  • <com.sdsmdg.harjot.vectormaster.VectorMasterView
  • Android: id = «@ + id / heart_vector»
  • android: layout_width = «150dp»
  • android: layout_height = «150dp»
  • aplicación: vector_src = ”@ drawable / ic_heart” />
  • VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
  • // encuentra la ruta correcta usando el nombre
  • Esquema PathModel = heartVector.getPathModelByName(«contorno»);
  • // establecer el color del trazo
  • contorno.setStrokeColor(Color.parseColor(“# ED4337”));
  • // establecer el color de relleno (si el color de relleno no está establecido o es TRANSPARENTE, no se dibujará el relleno)
  • contorno.setFillColor(Color.parseColor(“# ED4337”));
  • <com.sdsmdg.harjot.vectormaster.VectorMasterView
  • Android: id = «@ + id / heart_vector»
  • android: layout_width = «150dp»
  • android: layout_height = «150dp»
  • aplicación: vector_src = ”@ drawable / ic_heart” />
  • VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
  • // encuentra la ruta correcta usando el nombre
  • Esquema PathModel = heartVector.getPathModelByName(«contorno»);
  • // establece el comienzo del trazado de recorte (los valores se dan en una fracción de la longitud)
  • contorno.setTrimPathStart(0.0f);
  • // establece el final del trazado de recorte (los valores se dan en una fracción de la longitud)
  • contorno.setTrimPathEnd(0,65 f);
  • <com.sdsmdg.harjot.vectormaster.VectorMasterView
  • Android: id = «@ + id / heart_vector»
  • android: layout_width = «150dp»
  • android: layout_height = «150dp»
  • aplicación: vector_src = ”@ drawable / ic_heart” />
  • VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
  • // encuentra la ruta correcta usando el nombre
  • Esquema PathModel = heartVector.getPathModelByName(«contorno»);
  • contorno.setStrokeColor(Color.parseColor(“# ED4337”));
  • heartVector.setOnClickListener(Nuevo estilo.OnClickListener() {
  • @Transcripción
  • vacío público cuando se hace clic(Mostrar vista) {
  • // inicializa el valor de Animator y pasa los valores de color inicial y final
  • ValueAnimator valueAnimator = ValueAnimator.ofObject(Nuevo ArgbEvaluator(), Color BLANCO, Color.parseColor(«# ED4337»));
  • valueAnimator.setDuration(1000);
  • valueAnimator.addUpdateListener(nuevo ValueAnimator.AnimatorUpdateListener() {
  • @Transcripción
  • vacío público onAnimationUpdate(ValueAnimator valueAnimator) {
  • // establece el color de relleno y muestra la actualización
  • contorno.setFillColor((Entero) valueAnimator.getAnimatedValue());
  • heartVector.Actualizaciones();
  • }
  • });
  • valueAnimator.comienzo();
  • }
  • });
  • <com.sdsmdg.harjot.vectormaster.VectorMasterView
  • Android: id = «@ + id / heart_vector»
  • android: layout_width = «150dp»
  • android: layout_height = «150dp»
  • aplicación: vector_src = ”@ drawable / ic_heart” />
  • VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
  • // encuentra la ruta correcta usando el nombre
  • Esquema PathModel = heartVector.getPathModelByName(«contorno»);
  • contorno.setStrokeColor(Color.parseColor(“# ED4337”));
  • contorno.setTrimPathEnd(0.0f);
  • heartVector.setOnClickListener(Nuevo estilo.OnClickListener() {
  • @Transcripción
  • vacío público cuando se hace clic(Mostrar vista) {
  • // inicializa el valor de Animator y pasa los valores de inicio y fin al flotante
  • ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
  • valueAnimator.setDuration(1000);
  • valueAnimator.addUpdateListener(nuevo ValueAnimator.AnimatorUpdateListener() {
  • @Transcripción
  • vacío público onAnimationUpdate(ValueAnimator valueAnimator) {
  • // establece el valor final del cultivo y muestra la actualización
  • contorno.setTrimPathEnd((Flotante) valueAnimator.getAnimatedValue());
  • heartVector.Actualizaciones();
  • }
  • });
  • valueAnimator.comienzo();
  • }
  • });

Los ejemplos anteriores son solo casos de uso básicos y están pensados ​​como un comienzo rápido para usar la biblioteca Vector Master. Animaciones y casos de uso más complejos recortar rutas y grupos, vaya a AnimationExamples

Si su animación no incluye ninguna clip-path o group, entonces puedes usar Biblioteca RichPath desarrollado por el usuario tarek360. Esta biblioteca es realmente útil si no quiere permitirse demasiadas matemáticas o lógica.

La biblioteca también proporciona su propia implementación de extracción en el formulario VecotrMasterDrawable. Proporciona el mismo control sobre el vector, pero permite al usuario usar el dibujo como desee, como y Compound Drawable en TextView, o como fuente para aprovechar ImageView; esencialmente cualquier caso de uso que implique un Drawable puede ser reemplazado VectorMasterDrawable.

  • <TextView
  • Android: id = ”@ + id / text_view”
  • android: layout_width = «wrap_content»
  • android: layout_height = «wrap_content»
  • android: text = «Corazón»
  • android: textSize = ”30sp” />
  • <ImageView
  • Android: id = ”@ + id / image_view”
  • android: layout_width = «75dp»
  • android: layout_height = ”75dp” />
  • // Crea una instancia de tu propio dibujo
  • VectorMasterDrawable vectorMasterDrawable = nuevo VectorMasterDrawable(esto, R.drawable.ic_heart);
  • // Establecer el dibujo superior para TextView
  • TextView textView = (TextView) findViewById(R.id.text_view);
  • vista de texto.setCompoundDrawablesWithIntrinsicBounds(nulo, vectorMasterDrawable, nulo, nulo);
  • // Establecer el dibujo de fondo para ImageView
  • ImageView imageView = (ImageView) findViewById(R.id.image_view);
  • imageView.setImageDrawable(vectorMasterDrawable);
  • // Establece el color del trazo
  • PathModel pathModel = vectorMasterDrawable.getPathModelByName(«contorno»);
  • pathModel.setStrokeColor(Color.parseColor(“# ED4337”));
  • los PathParser.java se extrajo del código fuente de Android versión 5.1.1. Después de esta versión, todo el código de análisis se ha movido a nativo por razones de eficiencia. Incorporé algunos cambios del código nativo en PathParser.java, pero a veces todavía hay errores de análisis. También incluí un analizador de terceros de Forma de imagen de Android. Para utilizar este analizador en lugar del predeterminado, configure use_legacy_parser="false". Esto puede ayudar en determinadas situaciones, pero no siempre. Si encuentra un vector que no se dibuja correctamente, informe el problema y especifique el vector.
  • Actualmente no se admite la ruta de transformación. También me gustaría apoyar la transformación de la ruta entre vectores incompatibles.
  • Las sombras vectoriales aún no son compatibles.
  • Esta biblioteca no tiene métodos dedicados para admitir animaciones. Solo revela paths, groups etc., que el usuario debe usar como desee y, por lo tanto, se necesitan muchas matemáticas y lógica al crear animaciones. Si desea utilizar métodos especiales para animaciones RichPath biblioteca desarrollada tarek360.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *