Cómo hacer animaciones Check/Tick y Cross en Android

La clase AnimatedVectorDrawable se introdujo en la API 21 y se usa para animar Vector Drawables de manera hermosa y sencilla. Usando AnimatedVectorDrawable, uno puede:

Girar, escalar, traducir VectorDrawables
Anime el VectorDrawable como el color de relleno, etc.
Dibuja caminos y haz Path Morphing

Un elemento AnimatedVectorDrawable tiene un atributo VectorDrawable y uno o más elementos de destino. El elemento de destino puede especificar su destino mediante el atributo android:name y vincular el destino con el ObjectAnimator o AnimatorSet adecuado mediante el atributo android:animation .

Enfoque para dibujar la animación de Tick Cross:

Cree un nuevo archivo tick_cross.xml en el directorio de valores y agregue los siguientes comandos de ruta y datos de ruta dibujables vectoriales:

tick_cross.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  
   <!-- geometry -->
   <integer name="viewport_width">24</integer>
   <integer name="viewport_height">24</integer>
   <integer name="viewport_center_x">12</integer>
   <integer name="viewport_center_y">12</integer>
   <string name="path_tick">M4.8, 13.4 L9, 
                            17.6 M10.4, 
                            16.2 L19.6, 7
   </string>
   <string name="path_cross">M6.4, 6.4 L17.6, 
                            17.6 M6.4, 
                            17.6 L17.6, 6.4
   </string>
   <integer name="stroke_width">2</integer>
  
   <!-- names -->
   <string name="tick">tick</string>
   <string name="cross">cross</string>
   <string name="groupTickCross">groupTickCross</string>
  
   <!-- drawing -->
   <color name="stroke_color">#999</color>
</resources>

Ahora cree un nuevo directorio de recursos de Android . Haga clic derecho en la carpeta res y seleccione Directorio de recursos de Android. Asegúrese de seleccionar el tipo de recurso como animador .
Los animadores pueden cambiar las propiedades físicas de los objetos. Esto significa que si mueve una Vista a una nueva ubicación, las coordenadas táctiles se mapearán en la nueva ubicación sin ninguna otra intervención.

Ahora cree un nuevo archivo cross_to_tick.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para cross_to_tick.xml. Este archivo es responsable de la conversión de la cruz a una marca cuando el usuario hace clic en el icono de la cruz.

cruzar_a_tick.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="pathData"
    android:valueFrom="@string/path_cross"
    android:valueTo="@string/path_tick"
    android:duration="500"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:valueType="pathType" />

Ahora cree un nuevo archivo tick_to_cross.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para tick_to_cross.xml. Este archivo es responsable de la conversión de la marca en cruz cuando el usuario hace clic en el icono de la marca.

tick_to_cross.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="pathData"
    android:valueFrom="@string/path_tick"
    android:valueTo="@string/path_cross"
    android:duration="500"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:valueType="pathType"/>

Ahora cree un nuevo archivo giratorio_cruz_a_tick.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para tick_to_cross.xml. Este archivo es responsable de la rotación cuando el usuario hace clic en el icono de la cruz.

rotar_cruz_a_tick.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotation"
    android:valueFrom="-180"
    android:valueTo="0"
    android:duration="500"
    android:interpolator="@android:interpolator/fast_out_slow_in" />

Ahora cree un nuevo archivo giratorio_tick_to_cross.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para tick_to_cross.xml. Este archivo es responsable de la rotación cuando el usuario hace clic en el icono de marca.

rotar_cruz_a_tick.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="180"
    android:duration="500"
    android:interpolator="@android:interpolator/fast_out_slow_in" />

En los siguientes dos pasos, crearemos AnimatedVectorDrawable para cross_to_tick y tick_to_cross.

Ahora cree un nuevo archivo avd_cross_to_tick.xml en el directorio dibujable y el siguiente código.

avd_cross_to_tick.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_cross">
  
    <target
        android:name="@string/cross"
        android:animation="@animator/cross_to_tick" />
  
    <target
        android:name="@string/groupTickCross"
        android:animation="@animator/rotate_cross_to_tick" />
  
</animated-vector>

Ahora cree un nuevo archivo avd_tick_to_cross.xml en el directorio dibujable y el siguiente código.

avd_tick_to_cross.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_tick">
  
    <target
        android:name="@string/tick"
        android:animation="@animator/tick_to_cross" />
  
  
    <target
        android:name="@string/groupTickCross"
        android:animation="@animator/rotate_tick_to_cross" />
  
</animated-vector>

En este paso, definiremos un objeto estático dibujable para gráficos vectoriales. Ahora cree un nuevo archivo ic_tick.xml en el directorio dibujable y el siguiente código.

ic_tick.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="120dp"
        android:height="120dp"
        android:viewportWidth="@integer/viewport_width"
        android:viewportHeight="@integer/viewport_height">
  
    <group
        android:name="@string/groupTickCross"
        android:pivotX="@integer/viewport_center_x"
        android:pivotY="@integer/viewport_center_y">
  
        <path
            android:name="@string/tick"
            android:pathData="@string/path_tick"
            android:strokeWidth="@integer/stroke_width"
            android:strokeLineCap="square"
            android:strokeColor="@color/stroke_color"/>
    </group>
</vector>

En este paso, definiremos un objeto estático dibujable para gráficos vectoriales. Ahora cree un nuevo archivo ic_cross.xml en el directorio dibujable y el siguiente código.

ic_cross.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="120dp"
        android:height="120dp"
        android:viewportWidth="@integer/viewport_width"
        android:viewportHeight="@integer/viewport_height">
  
    <group
        android:name="@string/groupTickCross"
        android:pivotX="@integer/viewport_center_x"
        android:pivotY="@integer/viewport_center_y">
  
        <path
            android:name="@string/cross"
            android:pathData="@string/path_cross"
            android:strokeWidth="@integer/stroke_width"
            android:strokeLineCap="square"
            android:strokeColor="@color/stroke_color"/>
  
    </group>
  
</vector>

Ahora agregue el siguiente código en el archivo activity_main.xml .

actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:onClick="animate"
    tools:context=".MainActivity">
  
    <ImageView
        android:id="@+id/tick_cross"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_tick" />
  
</FrameLayout>

Ahora agregue el siguiente código en el archivo MainActivity.xml .

Actividad principal.xml

package org.geeksforgeeks.tickcross;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.graphics.drawable.AnimatedVectorDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
  
public class MainActivity extends AppCompatActivity {
  
    private ImageView tickCross;
    private AnimatedVectorDrawable tickToCross;
    private AnimatedVectorDrawable crossToTick;
    private boolean tick = true;
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tickCross = findViewById(R.id.tick_cross);
  
        tickToCross = (AnimatedVectorDrawable)
            getDrawable(
                R.drawable.avd_tick_to_cross);
  
        crossToTick = (AnimatedVectorDrawable)
            getDrawable(
                R.drawable.avd_cross_to_tick);
    }
    // This method help to animate our view.
    public void animate(View view)
    {
        AnimatedVectorDrawable drawable
            = tick
                  ? tickToCross
                  : crossToTick;
        tickCross.setImageDrawable(drawable);
        drawable.start();
        tick = !tick;
    }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

tick_cross.xml

cruzar_a_tick.xml

tick_to_cross.xml

rotar_cruz_a_tick.xml

rotar_cruz_a_tick.xml

avd_cross_to_tick.xml

avd_tick_to_cross.xml

ic_tick.xml

ic_cross.xml

actividad_principal.xml

Actividad principal.xml

Deja una respuesta Cancelar la respuesta