Animación de tarjeta invertida en Android

En este artículo, veremos cómo crear una aplicación Flip Card Animation en Android Studio. La animación hace que nuestra aplicación sea más atractiva, convincente y fácil de usar. 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 utilizaremos Kotlin como lenguaje de programación. 

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: trabajar con el archivo activity_main.xml

Vaya a res > diseño > archivo activity_main.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml. Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<!--We are going to use Constraintlayout-->
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    tools:context=".MainActivity">
  
      <!--Add a textView for front part of the card-->
    <TextView
        android:id="@+id/card_back"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:textAlignment="center"
        android:gravity="center"
        android:text="Back Card"
        android:textSize="22sp"
        android:background="#BF3030"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <!--Add a textview for back part of the card-->
    <TextView
        android:id="@+id/card_front"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:textAlignment="center"
        android:gravity="center"
        android:text="Front Card"
        android:textSize="22sp"
        android:background="#326314"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <!--Add a Button that will apply flip on the card-->
    <Button
        android:id="@+id/flip_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Flip Me"
        tools:ignore="MissingConstraints"
        android:layout_marginTop="380dp"
        tools:layout_editor_absoluteX="142dp"
        tools:layout_editor_absoluteY="559dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: crea un nuevo directorio

Cree un nuevo directorio con el nombre animador donde nos ocuparemos de la parte de animación frontal y posterior de la tarjeta. Para crear un nuevo directorio, siga las imágenes que se muestran a continuación.

Paso 4: Cree un nuevo archivo de recursos de Animator

Cree un nuevo archivo de recursos de animador con el nombre front_animator.xml que se encargará de la animación frontal de la tarjeta invertida. Para crear un nuevo archivo de recursos de Animator, siga las imágenes que se muestran a continuación.

Paso 5: trabajar con el archivo front_animator.xml

Vaya a res > animador > front_animator.xml y agregue el siguiente código a ese archivo. Aquí usaremos la etiqueta objectAnimator para la animación de la parte frontal de la tarjeta invertida. A continuación se muestra el código para el archivo front_animator.xml . 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:duration="1000"
        />
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="1"
        />
</set>

Paso 6: Vuelva a crear un nuevo archivo de recursos de animador

Nuevamente, cree un nuevo archivo de recursos de animador con el nombre back_animator.xml que manejará la animación de la parte posterior de la tarjeta invertida. Para crear un nuevo archivo de recursos de Animator, siga las mismas imágenes que se muestran anteriormente para crear el archivo front_animator.xml . 

Paso 7: trabajar con el archivo back_animator.xml

Vaya a res > animator > back_animator.xm l y agregue el siguiente código a ese archivo. Aquí usaremos la etiqueta objectAnimator para la animación de la parte frontal de la tarjeta invertida. A continuación se muestra el código para el archivo back_animator.xml . 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0"
        />
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:repeatMode="reverse"
        android:duration="1000"
        />
  
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="0"
        />
  
</set>

Paso 8: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo MainActivity.kt . Aquí veremos cómo operar la parte de animación frontal y posterior de la tarjeta invertida. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.example.flippingcard
  
import android.animation.AnimatorInflater
import android.animation.AnimatorSet
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
  
class MainActivity : AppCompatActivity() {
  
    lateinit var front_anim:AnimatorSet
    lateinit var back_anim: AnimatorSet
    var isFront =true
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Now Create Animator Object
        // For this we add animator folder inside res
        // Now we will add the animator to our card
        // we now need to modify the camera scale
        var scale = applicationContext.resources.displayMetrics.density
  
        val front = findViewById<TextView>(R.id.card_front) as TextView
        val back =findViewById<TextView>(R.id.card_back) as TextView
        val flip = findViewById<Button>(R.id.flip_btn) as Button
  
        front.cameraDistance = 8000 * scale
        back.cameraDistance = 8000 * scale
  
  
        // Now we will set the front animation
        front_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.front_animator) as AnimatorSet
        back_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.back_animator) as AnimatorSet
  
        // Now we will set the event listener
        flip.setOnClickListener{
            if(isFront)
            {
                front_animation.setTarget(front);
                back_animation.setTarget(back);
                front_animation.start()
                back_animation.start()
                isFront = false
  
            }
            else
            {
                front_animation.setTarget(back)
                back_animation.setTarget(front)
                back_animation.start()
                front_animation.start()
                isFront =true
  
            }
        }
    }
}

Producción:

Puede obtener el código fuente del proyecto desde este enlace: Haga clic aquí