Como Crear Animaciones en Android (Trasladar Elemento en eje X, Y) – Java

Nube Colectiva

hace 5 años

En esta página:

Demo Github

Cuando una aplicación ya cuenta con las funciones establecidas, llega el momento de aplicar animaciones a los elementos de la interface UI de la Aplicación, como los Botones, el cambio de Actividades, RecyclerView, ImageView, Textos y otros elementos, en este Post te voy a enseñar como crear animaciones mediante código, vamos con el Post.

Es obvio que para iniciar con las animaciones en Android necesito tener uno o varios elementos con los cuales interactuar.

Le aplicaré efectos a un Texto simple, para esto en mi layout voy a crear un TextView con id txt_home


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nube Colectiva"
        android:textSize="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"

xmlns:app="https://schemas.android.com/apk/res-auto"

xmlns:tools="https://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/txt_home"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Nube Colectiva"

android:textSize="24dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

En mi Actividad en el método onCreate llamo a mi Texto que dice Nube Colectiva lo coloco dentro de la variable txt


// Texto
TextView txt = findViewById(R.id.txt_home);

// Texto

TextView txt = findViewById(R.id.txt_home);

Animación: Trasladar Elemento de Derecha a Izquierda

Mediante la clase TranslateAnimation puede controlar la animación de elementos de forma vertical o de forma horizontal, como necesito mover mi Texto desde la Derecha hacia la Izquierda utilizaré los parámetros fromXDelta y toXDelta, el resto lo dejo en cero.

En el Parámetro fromXDelta le digo que mi texto debe desplazarse desde un rango de 1600.0f desde la derecha hacia la derecha, como necesito que al terminar la animación mi Texto se quede posicionado en el lugar por defecto de mi Actividad le asigno el valor 0 al parámetro toXDelta

Le asigno el nombre de variable an


// Animación: Entrada Derecha a Izquierda 
TranslateAnimation an = new TranslateAnimation(fromXDelta: 1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f);

// Animación: Entrada Derecha a Izquierda

TranslateAnimation an = new TranslateAnimation(fromXDelta: 1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f);

A mi animación le voy a dar una duración de 1 segundo pero en milisegundos, entonces serian 1000 milisegundos.


an.setDuration(1000);

an.setDuration(1000);

Arranco la animación con la función startAnimation


txt.startAnimation(an);

txt.startAnimation(an);

A continuación todo el código completo de mi Actividad


package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Texto
        TextView txt = findViewById(R.id.txt_home);

        // Animación: Trasladar Elemento de Derecha a Izquierda 
        TranslateAnimation an = new TranslateAnimation(fromXDelta: 1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f); 
        an.setDuration(1000);
        txt.startAnimation(an);
    }

}

package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.TranslateAnimation;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Texto

TextView txt = findViewById(R.id.txt_home);

// Animación: Trasladar Elemento de Derecha a Izquierda

TranslateAnimation an = new TranslateAnimation(fromXDelta: 1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f);

an.setDuration(1000);

txt.startAnimation(an);

}

Mi Texto se traslada desde el lado Derecho hacia el lado Izquierdo

Animación: Trasladar Elemento de Izquierda a Derecha

Los pasos para llevar acabo esta animación son casi los mismos que la Animación: Entrada Derecha a Izquierda, solo que esta vez le daré el mismo valor pero en negativo, es decir le aplico -1600.0f al parámetro fromXDelta


package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Texto
        TextView txt = findViewById(R.id.txt_home);

        // Animación: Trasladar Elemento de Izquierda a Derecha 
        TranslateAnimation an = new TranslateAnimation(fromXDelta: -1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f);
        an.setDuration(1000);
        txt.startAnimation(an);
    }

}

package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.TranslateAnimation;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Texto

TextView txt = findViewById(R.id.txt_home);

// Animación: Trasladar Elemento de Izquierda a Derecha

TranslateAnimation an = new TranslateAnimation(fromXDelta: -1600.0f, toXDelta: 0.0f, fromYDelta: 0.0f, toYDelta: 0.0f);

an.setDuration(1000);

txt.startAnimation(an);

}

Mi Texto se traslada desde el lado Izquierdo hacia el lado Derecho

Animación: Trasladar Elemento de Arriba hacia Abajo

Para que mi Texto se mueva de arriba hacia abajo voy a usar el parámetro fromYDelta y le doy el valor de -1600.0f


package com.example.holamundojava;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Texto 
        TextView txt = findViewById(R.id.txt_home);

        // Animación: Trasladar Elemento de Arriba hacia Abajo 
        TranslateAnimation an = new TranslateAnimation(fromXDelta: 0.0f, toXDelta: 0.0f, fromYDelta: -1600.0f, toYDelta: 0.0f);
        an.setDuration(1000);
        txt.startAnimation(an);
    }

}

package com.example.holamundojava;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.TranslateAnimation;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Texto

TextView txt = findViewById(R.id.txt_home);

// Animación: Trasladar Elemento de Arriba hacia Abajo

TranslateAnimation an = new TranslateAnimation(fromXDelta: 0.0f, toXDelta: 0.0f, fromYDelta: -1600.0f, toYDelta: 0.0f);

an.setDuration(1000);

txt.startAnimation(an);

}

Con esto mi Texto se desplaza desde la parte superior hacia la parte de abajo

Animación: Trasladar Elemento de Abajo hacia Arriba

Para esta animación usaré también el parámetro fromYDelta, solo que esta vez le daré el valor normal 1600.0f


package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Texto
        TextView txt = findViewById(R.id.txt_home);

        // Animación
        TranslateAnimation an = new TranslateAnimation(00.0f, 0.0f, 1600.0f, 0.0f);
        an.setDuration(1000);
        txt.startAnimation(an);
    }

}

package com.example.app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.TranslateAnimation;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Texto

TextView txt = findViewById(R.id.txt_home);

// Animación

TranslateAnimation an = new TranslateAnimation(00.0f, 0.0f, 1600.0f, 0.0f);

an.setDuration(1000);

txt.startAnimation(an);

}

Y el texto se desplaza desde la parte inferior hacia la parte de arriba

Conclusión

Entendido como trasladar elementos en los ejes X o Y, puedes aplicarle esta animación a otros elementos como una imagen, un icono u otro elemento que desees.

Podemos desplazar otro tipo de elementos, en algunos casos necesitaremos de otras funciones que nos brinda Android, como AnimatorSet, ObjectAnimator, ValueAnimator , entre otros recursos que puedes encontrar en este enlace.

Depende de lo que necesites hacer, también se puede hacer uso de librerías externas no nativas de Android para crear animaciones más complejas o que den solución al problema que necesitas resolver en cuanto a animaciones en Android.

Nota (s)

En futuras versiones de Android las funciones que he usado en este Post, pueden ser modificadas, eliminadas o pueden seguir estando disponible, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Android.
En otros artículos veremos otro tipo de animaciones más complejas con otros tipos de elementos en Android y también en otro artículo te enseñare sobre librerías externas para crear animaciones en Android.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.