Animaciones de Android en Kotlin

La animación es un método en el que una colección de imágenes se combinan de una manera específica y se procesan para que aparezcan como imágenes en movimiento. Las animaciones de construcción hacen que los objetos en pantalla parezcan estar vivos. Android tiene bastantes herramientas para ayudarte a crear animaciones con relativa facilidad. por lo que en este artículo aprenderemos a crear animaciones usando Kotlin. a continuación hay algunos atributos que estamos usando mientras escribimos el código en xml.

Tabla de Atributos:

ATRIBUTOS XML	DESCRIPCIÓN
Android: duración	Se utiliza para especificar la duración de la animación para ejecutar
Android: de Alpha	Es el valor alfa inicial para la animación, donde 1,0 significa completamente opaco y 0,0 significa completamente transparente .
android:toAlfa	Es el valor alfa final.
Android: identificación	Establece una identificación única de la vista
android:desdeYDelta	Es el cambio en la coordenada Y que se aplicará al inicio de la animación.
android:toYDelta	Es el cambio en la coordenada Y que se aplicará al final de la animación.
android:comenzarCompensar	El retraso se produce cuando se ejecuta una animación (en milisegundos), una vez que se alcanza la hora de inicio.
Android: pivoteX	Representa las coordenadas del eje X para hacer zoom desde el punto de partida.
Android: pivote	Representa las coordenadas del eje Y para hacer zoom desde el punto de inicio.
android:desdeXScale	Compensación de tamaño X inicial,
android:desdeYScale	Desplazamiento inicial del tamaño Y,
android:toXScale	Fin del desplazamiento de tamaño X
android:toYScale	Fin del desplazamiento de tamaño Y
android:desdeGrados	Posición angular inicial, en grados.
android:aGrados	Posición angular final, en grados.
Android: interpolador	Un interpolador define la tasa de cambio de una animación.

Al principio, crearemos una nueva aplicación para Android. Luego, crearemos algunas animaciones.
Si ya creó el proyecto, ignore el paso 1.

Crear nuevo proyecto

Abra el estudio de Android
Vaya a Archivo => Nuevo => Nuevo proyecto.
Luego, seleccione Actividad vacía y haga clic en siguiente
- Escriba el nombre de la aplicación como DynamicEditTextKotlin
- Seleccione el SDK mínimo que necesite, aquí hemos seleccionado 21 como SDK mínimo
- Elija el idioma como Kotlin y haga clic en el botón Finalizar.

Si ha seguido el proceso anterior correctamente, obtendrá un proyecto recién creado con éxito.
Después de crear el proyecto, modificaremos los archivos xml. En el archivo xml, crearemos un TextView donde se realizan todas las animaciones y ocho botones para ocho animaciones diferentes.

Modificar archivo activity_main.xml

Abra el archivo res/layout/activity_main.xml y agréguele el código.

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">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearLayout"
        android:gravity="center"
        android:text="Geeks for Geeks"
        android:textSize="32sp"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold" />
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/fade_in"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Fade In"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/fade_out"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Fade Out"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/zoom_in"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Zoom In"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/zoom_out"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Zoom Out"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/slide_down"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Slide Down"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/slide_up"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Slide Up"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/bounce"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Bounce"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/rotate"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Rotate"
                android:textAllCaps="false" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Después de modificar el diseño, crearemos archivos xml para animaciones . así que primero crearemos una carpeta con el nombre anim .
En esta carpeta, agregaremos los archivos XML que se utilizarán para producir las animaciones. Para que esto suceda, vaya a app/res, haga clic con el botón derecho y luego seleccione Directorio de recursos de Android y asígnele el nombre anim.

rebote.xml

En esta animación, el texto rebota como una pelota.

XML

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
    <translate
        android:fromYDelta="100%"
        android:toYDelta="-20%"
        android:duration="300" />
    <translate
        android:startOffset="500"
        android:fromYDelta="-20%"
        android:toYDelta="10%"
        android:duration="150" />
    <translate
        android:startOffset="1000"
        android:fromYDelta="10%"
        android:toYDelta="0"
        android:duration="100" />
</set>

fade_in.xml

En la animación Fade In, el texto aparecerá desde el fondo.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

fade_out.xml

En la animación Fade Out, el color del texto se desvanece durante un período de tiempo determinado.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

rotar.xml

En la animación de rotación, el texto se rota durante un período de tiempo determinado.

XML

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="0"
    android:toDegrees="360" />

deslizar_abajo.xml

En esta animación el texto vendrá de arriba hacia abajo.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="-100%"
        android:toYDelta="0" />
</set>

deslizar_hacia arriba.xml

En esta animación el texto irá de abajo hacia arriba.

XML

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%" />
</set>

zoom_in.xml

En esta animación, el texto aparecerá más grande durante un período de tiempo determinado.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5">
    </scale>
</set>

zoom_out.xml

En esta animación, el texto aparecerá más pequeño durante un período de tiempo determinado.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" >
    </scale>
</set>

Después de crear todas las animaciones en xml. crearemos MainActivity.

Crear archivo MainActivity.kt

Abra el archivo app/src/main/java/net.geeksforgeeks.AnimationsInKotlin/MainActivity.kt y agregue el siguiente código.

Kotlin

package net.geeksforgeeks.animationsinkotlin
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.AnimationUtils
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        fade_in.setOnClickListener {
            textView.visibility = View.VISIBLE
            val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in)
            textView.startAnimation(animationFadeIn)
        }
        fade_out.setOnClickListener {
            val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out)
            textView.startAnimation(animationFadeOut)
            Handler().postDelayed({
                textView.visibility = View.GONE
            }, 1000)
        }
        zoom_in.setOnClickListener {
            val animationZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoom_in)
            textView.startAnimation(animationZoomIn)
        }
        zoom_out.setOnClickListener {
            val animationZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoom_out)
            textView.startAnimation(animationZoomOut)
        }
        slide_down.setOnClickListener {
            val animationSlideDown = AnimationUtils.loadAnimation(this, R.anim.slide_in)
            textView.startAnimation(animationSlideDown)
        }
        slide_up.setOnClickListener {
            val animationSlideUp = AnimationUtils.loadAnimation(this, R.anim.slide_out)
            textView.startAnimation(animationSlideUp)
        }
        bounce.setOnClickListener {
            val animationBounce = AnimationUtils.loadAnimation(this, R.anim.bounce)
            textView.startAnimation(animationBounce)
        }
        rotate.setOnClickListener {
            val animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotate)
            textView.startAnimation(animationRotate)
        }
    }
}

Como el archivo AndroidManifest.xml es un archivo muy importante en la aplicación de Android, a continuación se muestra el código del archivo de manifiesto.

Archivo AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file would look like below

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.geeksforgeeks.animationsinkotlin">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Ejecutar como emulador:

Puede encontrar el código completo aquí: https://github.com/missyadavmanisha/AnimationsInKotlin

Publicación traducida automáticamente

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