Interpolador en Android con Ejemplo

Un interpolador es una función (en el sentido matemático) que genera valores «interpolados» entre un rango de valores que se le dan como entrada. La interpolación es simplemente un método para generar nuevos puntos de datos entre dos puntos de datos fijos. Los valores exactos de estos puntos de datos generados están determinados por el tipo de interpolación que se realiza. Por ejemplo, en interpolación lineal, todos los valores generados se distribuyen uniformemente entre los puntos fijos. Si bien es útil comprender la interpolación, no es necesario comenzar a animar sus vistas en sus aplicaciones. De hecho, la perspectiva de animación de la interpolación podría resultar útil para comprenderlo. Entonces empecemos. En este ejemplo, crearemos una aplicación simple con una lista de botones. Cada uno de estos botones es para un tipo específico de animación interpolada que comienza cuando lo presiona. La animación es una simple traslación horizontal que mueve el botón hacia la derecha.

La interfaz del interpolador

En el marco de desarrollo de Android, Interpolator se define como una interfaz. Esto permite que los métodos acepten un interpolador que puede aportar su propia configuración y no vincular a los desarrolladores a una implementación específica. En el momento de escribir este artículo, hay 11 subclases indirectas de la interfaz Interpolator. Están:

• Interpolador lineal : los valores generados entre los dos puntos fijos se distribuyen uniformemente. Por ejemplo, considere a = 1 yb = 5 como los puntos fijos. La interpolación lineal entre a y b se vería así: 1 -> 2 -> 3 -> 4 -> 5, donde se han generado los números entre 1 y 5.
• Acelerar interpolador : este interpolador genera valores que inicialmente tienen una pequeña diferencia entre ellos y luego aumenta gradualmente la diferencia hasta que alcanza el punto final. Por ejemplo, los valores generados entre 1 -> 5 con interpolación acelerada podrían ser 1 -> 1.2 -> 1.5 -> 1.9 -> 2.4 -> 3.0 -> 3.6 -> 4.3 -> 5. Observe cómo crece la diferencia entre valores consecutivos consecuentemente.
• Interpolador de desaceleración : en el sentido de que el interpolador de aceleración genera valores de manera acelerada, un interpolador de desaceleración genera valores que se «ralentizan» a medida que avanza en la lista de valores generados. Así, los valores generados inicialmente tienen una mayor diferencia entre ellos y la diferencia se reduce gradualmente hasta llegar al punto final. Por lo tanto, los valores generados entre 1 -> 5 podrían verse como 1 -> 1.8 -> 2.5 -> 3.1 -> 3.6 -> 4.0 -> 4.3 -> 4.5 -> 4.6 -> 4.7 -> 4.8 -> 4.9 -> 5 Nuevamente, preste atención a la diferencia entre valores consecutivos que se hacen más pequeños.
• Interpolador de aceleración y desaceleración : este interpolador comienza con una tasa de cambio lenta y acelera hacia la mitad. A medida que se acerca al final, comienza a desacelerarse, es decir, reduce la tasa de cambio.
• Interpolador anticipado : esta interpolación comienza moviéndose primero hacia atrás, luego «lanza» hacia adelante y luego continúa gradualmente hasta el final. Esto le da un efecto similar a los dibujos animados donde los personajes retroceden antes de salir corriendo. Por ejemplo, los valores generados entre 1 -> 3 podrían verse como: 1 -> 0.5 -> 2 -> 2.5 -> 3. Observe cómo el primer valor generado está «detrás» del valor inicial y cómo salta hacia adelante a un valor por delante. del valor inicial. Luego procede uniformemente hasta el punto final.
• Interpolador de rebote : para comprender este interpolador, considere una escala de un metro colocada verticalmente sobre una superficie sólida. El valor inicial está en la parte superior y el valor final está en la parte inferior, tocando la superficie. Considere ahora, una pelota que se deja caer al lado de la escala del metro. La pelota al golpear la superficie rebota hacia arriba y hacia abajo unas cuantas veces hasta que finalmente se detiene en la superficie. Con el interpolador de rebote, los valores generados son similares a la lista de valores por los que pasa la pelota junto a la escala del medidor. Por ejemplo, los valores generados entre 1 -> 5 podrían ser 1 -> 2 -> 3 -> 4 -> 5 -> 4.2 -> 5 -> 4.5 -> 5. Observe cómo rebotan los valores generados.
• Interpolador de sobreimpulso : este interpolador genera valores uniformemente de principio a fin. Sin embargo, después de llegar al final, sobrepasa o va más allá del último valor por una pequeña cantidad y luego regresa al punto final. Por ejemplo, los valores generados entre 1 -> 5 podrían verse como: 1 -> 2 -> 3 -> 4 -> 5 -> 5.5 -> 5.
• Interpolador de sobreimpulso anticipado: este interpolador es una combinación de los interpoladores de sobreimpulso y de anticipación. Es decir, primero retrocede desde el valor inicial, se lanza hacia adelante y se mueve uniformemente hasta el punto final, lo rebasa y luego regresa al punto final.

Crear la aplicación

Para comprender mejor las clases mencionadas anteriormente y verlas en acción, se recomienda encarecidamente que siga un proyecto real y ejecute la aplicación a medida que la construye.

• Habilitar y configurar la vinculación de vistas (opcional) La
  vinculación de vistas es una característica pequeña e ingeniosa que se introdujo no hace mucho tiempo y que facilita el trabajo con vistas en su aplicación. Esencialmente, elimina las llamadas a findViewById y le brinda identificadores de vistas que son más fáciles de usar. También hacen que su código sea más limpio. Es un proceso muy simple y puedes ver cómo encenderlo y configurarlo en los documentos oficiales . Sin embargo, este paso es opcional y si prefiere conectar sus vistas manualmente, también puede continuar con eso. El resultado final solo debe ser que tenga identificadores para los botones que desea configurar.
• Crear el diseño
  En su archivo activity_main.xml , cree la lista de botones como se muestra en la sección de código a continuación. El diseño consiste básicamente en código repetido para los diferentes botones, por lo que si comprende lo que sucede con un botón, también puede aplicar lo mismo a los otros botones.
   

Paso 1: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="16dp">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Interpolators"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/linear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Linear"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/accelerate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Accelerate"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/decelerate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Decelerate"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/bounce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Bounce"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/overshoot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Overshoot"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/anticipate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Anticipate"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/cycle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Cycle"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/accelerateDecelerate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Accelerate Decelerate"
            android:textColor="#FFF" />
  
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/anticipateOvershoot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Anticipate Overshoot"
            android:textColor="#FFF" />
  
    </LinearLayout>
</ScrollView>

Paso 2: trabajar con el archivo MainActivity.java

Configurar objeto ObjectAnimator: para este ejemplo, usaremos un solo ObjectAnimator para animar los diferentes botones. También usaremos una duración fija de 2 segundos para que se reproduzcan las animaciones, esto nos da suficiente tiempo para observar los comportamientos de la animación. Puede configurar esto con 2 líneas de código como se muestra a continuación.

// 2-second animation duration
final private static int ANIMATION_DURATION = 2000;
private ObjectAnimator animator;

Configurar animaciones al hacer clic en el botón: ahora que tenemos la configuración de requisitos previos, finalmente podemos configurar los botones para activar sus respectivas animaciones. Para cada botón, puede configurar la propiedad específica para animar, su duración y la interpolación, entre otras cosas. La configuración básica de tres pasos se realiza como se muestra en el fragmento de código a continuación:

// Linear
binding.linear.setOnClickListener(clickedView -> {
    animator = ObjectAnimator.ofFloat(binding.linear,"translationX", 200f);
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(ANIMATION_DURATION);
    animator.start();
});

MainActivity.java

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import androidx.appcompat.app.AppCompatActivity;
import com.example.doobar.databinding.ActivityMainBinding;
  
public class MainActivity extends AppCompatActivity {
    
    // 2-second animation duration
    final private static int ANIMATION_DURATION = 2000; 
  
    private ActivityMainBinding binding;
    private ObjectAnimator animator;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        View view = binding.getRoot();
        setContentView(view);
  
        // setup animation buttons
  
        // Linear
        binding.linear.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.linear, "translationX", 200f);
            animator.setInterpolator(new LinearInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Accelerate
        binding.accelerate.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.accelerate, "translationX", 200f);
            animator.setInterpolator(new AccelerateInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Decelerate
        binding.decelerate.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.decelerate, "translationX", 200f);
            animator.setInterpolator(new DecelerateInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Bounce
        binding.bounce.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.bounce, "translationX", 200f);
            animator.setInterpolator(new BounceInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Overshoot
        binding.overshoot.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.overshoot, "translationX", 200f);
            animator.setInterpolator(new OvershootInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Anticipate
        binding.anticipate.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.anticipate, "translationX", 200f);
            animator.setInterpolator(new AnticipateInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Cycle
        binding.cycle.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.cycle, "translationX", 200f);
            animator.setInterpolator(new CycleInterpolator(2));
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Accelerate Decelerate
        binding.accelerateDecelerate.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.accelerateDecelerate, "translationX", 200f);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
  
        // Anticipate Overshoot
        binding.anticipateOvershoot.setOnClickListener(clickedView -> {
            animator = ObjectAnimator.ofFloat(binding.anticipateOvershoot, "translationX", 200f);
            animator.setInterpolator(new AnticipateOvershootInterpolator());
            animator.setDuration(ANIMATION_DURATION);
            animator.start();
        });
    }
}

Salida: Ejecutar la aplicación

Después de haber creado los botones y haberlos configurado para activar animaciones cuando se presionan, está todo listo para iniciar la aplicación y ver cómo sus animaciones cobran vida. ¡Y tu estas listo! Así es como usa interpoladores en sus animaciones para darles vida y no hacer que parezcan monótonas.

Puede ver la aplicación completa aquí: https://github.com/krishnakeshan/android-interpolators .