Cómo hacer una animación Heart Fill 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 relleno de corazón:

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

corazón.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- geometry -->
    <string name="heart_empty_path">
        M32.95, 19 C31.036, 19 29.199, 19.8828338 28,
        21.2724796 C26.801, 19.8828338 24.964, 
        19 23.05, 19 C19.6565, 19 17, 21.6321526 17,
        24.9945504 C17, 29.1089918 20.74, 32.4713896 
        26.405, 37.5667575 L28, 39 L29.595, 37.5667575 C35.26,
        32.4713896 39, 29.1089918 39, 24.9945504 C39,
        21.6321526 36.3435, 19 32.95, 19 L32.95, 
        19 Z M28.1155, 35.9536785 L28, 36.0572207 L27.8845,
        35.9536785 C22.654, 31.2506812 19.2,
        28.1444142 19.2, 24.9945504 C19.2, 22.8201635 20.8555,
        21.1798365 23.05, 21.1798365 C24.744, 
        21.1798365 26.394, 22.2643052 26.9715, 23.7520436 
        L29.023, 23.7520436 C29.606, 22.2643052 31.256,
        21.1798365 32.95, 21.1798365 C35.1445, 
        21.1798365 36.8, 22.8201635 36.8,
        24.9945504 C36.8, 28.1444142 33.346,
        31.2506812 28.1155, 35.9536785 L28.1155,
        35.9536785 Z
    </string>
  
    <string name="heart_full_path">
        M28, 39 L26.405, 37.5667575 C20.74,
        32.4713896 17, 29.1089918 17, 
        24.9945504 C17, 21.6321526 19.6565,
        19 23.05, 19 C24.964, 19 26.801, 19.8828338 28,
        21.2724796 C29.199, 19.8828338 31.036, 19 32.95,
        19 C36.3435, 19 39, 21.6321526 39, 24.9945504 C39,
        29.1089918 35.26, 32.4713896 29.595,
        37.5667575 L28, 39 L28, 39 Z
    </string>
  
    <string name="heart_clip_hidden">
        M18 37 L38 37 L38 37 L18 37 Z
    </string>
  
    <string name="heart_clip_shown">
        M0 0 L56 0 L56 56 L0 56 Z
    </string>
</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 empty_heart.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para el archivo empty_heart.xml. Este archivo es responsable de la animación cuando el usuario hace clic en el ícono del corazón lleno.

corazón_vacío.xml

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

Ahora cree un nuevo archivo fill_heart.xml en el directorio animador . En este archivo, definimos principalmente la duración y el tipo de animación para el archivo empty_heart.xml. Este archivo es responsable de la animación cuando el usuario hace clic en el icono del corazón vacío.

llenar_corazon.xml

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

En los siguientes dos pasos, crearemos AnimatedVectorDrawable tanto para el corazón vacío como para el corazón lleno.

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

avd_corazón_vacío.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_heart">
  
    <target
        android:name="clip"
        android:animation="@animator/empty_heart" />
</animated-vector>

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

avd_heart_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_heart">
  
    <target
        android:name="clip"
        android:animation="@animator/fill_heart" />
  
</animated-vector>

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

ic_corazón.xml

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="280dp"
    android:height="280dp"
    android:viewportWidth="56"
    android:viewportHeight="56">
  
    <path
        android:name="empty"
        android:pathData="@string/heart_empty_path"
        android:fillColor="#219806" />
  
    <clip-path
        android:name="clip"
        android:pathData="@string/heart_clip_hidden" />
  
    <path
        android:name="full"
        android:pathData="@string/heart_full_path"
        android:fillColor="#1A7A04" />
  
</vector>

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

MainActivity.java

package org.geeksforgeeks.fillheart;
  
import android.app.Activity;
import android.graphics.drawable.AnimatedVectorDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
  
public class MainActivity extends Activity {
  
    private ImageView imageView;
    private AnimatedVectorDrawable emptyHeart;
    private AnimatedVectorDrawable fillHeart;
    private boolean full = false;
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.image_view);
        emptyHeart
            = (AnimatedVectorDrawable)
                getDrawable(
                    R.drawable.avd_heart_empty);
        fillHeart
            = (AnimatedVectorDrawable)
                getDrawable(
                    R.drawable.avd_heart_fill);
    }
  
    // This method help to animate our view.
    public void animate(View view)
    {
        AnimatedVectorDrawable drawable
            = full
                  ? emptyHeart
                  : fillHeart;
        imageView.setImageDrawable(drawable);
        drawable.start();
        full = !full;
    }
}

Ahora compile y ejecute la aplicación de Android.

Producción:

Referencia:

Publicación traducida automáticamente

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