¿Cómo aplicar efectos de animaciones de vista en Android?

Las animaciones de vista de Android se utilizan para aplicar animaciones sorprendentes en TextView y EditText en la aplicación de Android. Tales animaciones le dan a la aplicación una apariencia fluida de una manera nueva. En este artículo, vamos a desarrollar el efecto Android View Animation en Android Studio .

¿Qué vamos a construir en este artículo? 

En este artículo, desarrollaremos una aplicación de muestra con el efecto de animación TextView sobre su actividad. A continuación se proporciona un gif de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia

Ahora, navegue a Gradle Scripts > build.gradle(Module:app) agregue las siguientes dependencias en la sección de dependencias.

implementation 'com.daimajia.androidanimations:library:2.4@aar'

Ahora, sincronice su proyecto y ahora tenemos todo lo que necesitaremos durante la implementación, así que ahora avance hacia su implementación.  

Paso 3: trabajar con el archivo activity_main.xml

Ahora, vaya a la aplicación > res > diseño > actividad_principal.xml y pegue el código escrito a continuación en el archivo actividad_principal.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relative_layout"
    tools:context=".MainActivity">
  
    <!-- TextView to display text-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="750px"
        android:layout_height="200px"
        android:layout_centerInParent="true"
        android:fontFamily="sans-serif-black"
        android:text="GeeksForGeeks"
        android:textColor="#4CAF50"
        android:textSize="35dp" />
  
    <!--Button to perform click event-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_centerInParent="true"
        android:background="#4CAF50"
        android:text="Click Me" />
    
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya a la aplicación > java > nombre del paquete > archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;
  
public class MainActivity extends AppCompatActivity {
    
   // declaring textView
   TextView textView;
    
   // declaring button
   Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initializing textView by findViewById
        textView= findViewById(R.id.textView);
  
        // initializing button by findViewById
        button= findViewById(R.id.button);
  
        // apply click event to button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
  
                // making animated textView using YoYo.with()
                // Tada can be replaced with other animation Effects
                YoYo.with(Techniques.Tada)
                        .duration(700)
                        .repeat(5)
                        .playOn(findViewById(R.id.textView));
            }
        });
    }
}

Nota: 

También podemos usar otros efectos de animación como Tada. A continuación se proporciona una lista de algunos efectos hermosos con sus categorías:

• Atención: Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave
• Especial:   Bisagra, RollIn, RollOut, Landing, TakeOff, DropOut
• Rebote: rebote   hacia adentro, rebote hacia abajo, rebote hacia la izquierda, rebote hacia la derecha, rebote hacia arriba
• Desvanecimiento: Fundido   de entrada, Fundido de entrada hacia arriba, Fundido de entrada hacia abajo, Fundido de entrada hacia la izquierda, Fundido de entrada hacia la derecha, Fundido de salida, Fundido de salida hacia abajo, Fundido de salida hacia la izquierda, Fundido de salida hacia la derecha, Fundido de salida hacia arriba
• Voltear:   FlipInX, FlipOutX, FlipOutY
• Rotar: Rotar   hacia adentro, Rotar hacia abajo a la izquierda, Rotar hacia adentro hacia abajo a la derecha, Rotar hacia adentro hacia arriba a la izquierda, Rotar hacia adentro hacia arriba a la derecha, Rotar hacia afuera, Rotar hacia afuera hacia abajo a la izquierda, Rotar hacia afuera hacia abajo a la derecha, Rotar hacia afuera hacia arriba a la izquierda, Rotar hacia afuera hacia arriba a la derecha
• Diapositiva:  SlideInLeft, SlideInRight, SlideInUp, SlideInDown, SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown
• Zoom:  ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

Eso es todo, ahora la aplicación está lista para instalarse en el dispositivo. Así es como se ve la salida de la aplicación.

Producción: