¿Cómo crear animaciones de degradado como Instagram usando Spark Library en Android?

En este artículo, vamos a implementar Spark Library. Aquí vamos a mostrar una animación que cambiará los colores de la actividad linealmente. Esta función se puede usar simplemente para mostrar una animación y cuando un usuario carga una actividad. O también se puede usar para mostrar una animación en la pantalla de bienvenida. Veamos la implementación de esta funció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: Agregar dependencia

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘io.github.tonnyl:spark:0.1.0-alpha’

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

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:id="@+id/relativel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al 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.

Java

package com.example.drawable;
  
import android.os.Bundle;
import android.widget.RelativeLayout;
  
import androidx.appcompat.app.AppCompatActivity;
  
import io.github.tonnyl.spark.Spark;
  
public class MainActivity extends AppCompatActivity {
  
    Spark spark;
    RelativeLayout layout;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layout = findViewById(R.id.relativel);
  
        spark = new Spark.Builder()
                .setView(layout)   // set the layout of main screen
                .setDuration(5000) // set duration
                .setAnimList(Spark.ANIM_BLUE_PURPLE)  // set the color to change
                .build();  // build the layout
    }
  
    @Override
    protected void onResume() {
        super.onResume();
        spark.startAnimation(); // start animation on resume
    }
  
    @Override
    protected void onPause() {
        super.onPause();
        spark.stopAnimation(); // stop animation on pause
    }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por annianni 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 *