Animación de rebote en Android

Para hacer que la aplicación de Android sea más atractiva, agregamos muchas cosas y la animación es una de las mejores cosas que hace que la aplicación sea más atractiva e involucra al usuario con la aplicación. Entonces, en este artículo, agregaremos una animación de rebote al Botón . Se puede usar este tutorial para agregar animación de rebote a cualquier vista en el estudio de Android, como ImageView , TextView , EditText , etc. qué

bounce animation

Pasos para crear una animación de rebote

Paso 1: Creación de 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 elija Java como lenguaje aunque vamos a implementar este proyecto en lenguaje Java.

Paso 2: Diseño de la interfaz de usuario 

  • Vaya a la aplicación -> res , haga clic con el botón derecho en la carpeta res y luego en Nuevo -> Directorio de recursos de Android y cree un directorio anim .
  • Luego haga clic con el botón derecho en la carpeta anim , luego vaya a Nuevo -> Archivo de recursos de animación y cree un archivo bounce.xml .
  • El archivo bounce.xml contiene la animación que se usa para animar el botón en el siguiente paso. El código completo para bounce.xml se proporciona a continuación.

bounce.xml

<?xml version="1.0" encoding="utf-8"?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
  
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.5"
        android:toXScale="1.0"
        android:fromYScale="0.5"
        android:toYScale="1.0"
        android:duration="500"/>
</set>
  • Ahora vaya a la aplicación -> res -> diseño -> archivo activity_main.xml y agregue un botón simple , que queremos animar. Aquí está el código para el archivo activity_main.xml .

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
  
<!-- Button with Bounce Animation -->
<Button
    android:id="@+id/button"
    android:layout_centerInParent="true"
    android:background="@color/colorPrimary"
    android:textColor="#ffffff"
    android:text="Let's Bounce"
    android:layout_width="200dp"
    android:layout_height="80dp"/>
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.java

  • Abra la llamada MainActivity.java y dentro del método onCreate() obtenga la animación de la carpeta anim .

// cargando Animación desde

Animación final animation = AnimationUtils.loadAnimation(this,R.anim.bounce);

  • Obtenga la referencia del botón que creamos en el archivo activity_main.xml

// obtener el botón del archivo activity_main.xml

Botón final button= findViewById(R.id.button);

  • Crea un OnClickListener para el botón y startAnimation dentro de onClick() .

// clickListener para el botón

button.setOnClickListener(nueva Vista.OnClickListener() {

           @Anular

           public void onClick (Ver vista) {

              // inicia la animacion

               button.startAnimation(animación);

           }

});

  • El código completo para el archivo MainActivity.java se proporciona a continuación.

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // loading Animation from
        final Animation animation = AnimationUtils.loadAnimation(this, R.anim.bounce);
  
        // getting the Button from activity_main.xml file
        final Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // start the animation
                button.startAnimation(animation);
            }
        });
    }
}

Salida: ejecutar en el emulador 

Recursos:

Publicación traducida automáticamente

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

Deja una respuesta

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