Android Rotar animaciones en Kotlin

La animación de rotación es un tipo especial de animación en Android que controla la rotación de un objeto. Los desarrolladores suelen utilizar este tipo de animaciones para dar una idea al usuario sobre los cambios que se producen en la aplicación, como la carga de contenido, el procesamiento de datos, etc. Al utilizar el efecto de animación de rotación, un objeto se puede rotar en el plano de actividad XY. y permite la rotación tanto en sentido horario como antihorario. 

rotate-animation

La jerarquía de clases de la clase RotateAnimation en Kotlin

AndroidRotate class heirarchy in kotlin

Atributos XML que definen la rotación de un objeto

Atributos XML Descripción
Android: pivoteX Para definir la coordenada X del punto sobre el que se gira el objeto
Android: pivote Para definir la coordenada Y del punto sobre el que se gira el objeto
android:desdeGrados La rotación del objeto comienza a partir de este grado geométrico.
android:aGrados La rotación del objeto termina en este grado geométrico.
Android: duración Se utiliza para definir la duración de la animación en milisegundos.
android:comenzarCompensar Se utiliza para retrasar el tiempo de animación en milisegundos.

Acercarse

Este ejemplo demuestra los pasos necesarios para implementar la animación de rotación en el sentido de las agujas del reloj y en el sentido contrario a las agujas del reloj en un archivo de imagen. Se agregará un archivo de imagen en la actividad usando ImageView .

Nota: Los pasos se realizan en Android Studio versión 4.0

Paso 1: Crear un nuevo proyecto 

  1. Haga clic en Archivo, luego en Nuevo => Nuevo proyecto.
  2. Seleccione el idioma como Kotlin.
  3. Seleccione el SDK mínimo según su necesidad.

Paso 2: modificar el archivo activity_main.xml 

A continuación se muestra el código del archivo activity_main.xml para agregar TextView, ImageView y 2 botones en una actividad.

Nombre de archivo: actividad_principal.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:background="#168BC34A"
    tools:context=".MainActivity" >
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/roboto"
        android:text="@string/heading"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="36sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.050000012" />
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="243dp"
        android:layout_height="241dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.19999999"
        app:srcCompat="@drawable/logo" />
 
    <Button
        android:id="@+id/clk_rotate_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#AB4CAF50"
        android:fontFamily="@font/roboto"
        android:text="@string/clk_rotate_button_text"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.7" />
 
    <Button
        android:id="@+id/anticlk_rotate_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#AB4CAF50"
        android:fontFamily="@font/roboto"
        android:text="@string/anticlk_rotate_button_text"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.78"
        app:layout_constraintStart_toEndOf="@+id/clk_rotate_button"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.7" />
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Defina el archivo XML para la rotación de la imagen en sentido horario y antihorario
. Cree un nuevo directorio en la carpeta res de la aplicación y asígnele el nombre anim . En este directorio, cree 2 archivos de recursos de animación, a saber, rotar_en sentido horario y rotar_en sentido antihorario. Estos 2 archivos son el archivo XML que contiene los detalles de la animación. A continuación se muestra el código para el archivo. 

Nombre de archivo: rotar_en el sentido de las agujas del reloj.xml

XML

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

Nombre de archivo: rotar_antihorario.xml

XML

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

Paso 4: Modifique el archivo MainActivity.kt 
A continuación se muestra el código para que el archivo MainActivity.kt se cargue e inicie la animación en el widget ImageView de acuerdo con el botón en el que hizo clic el usuario.

Nombre de archivo: MainActivity.kt

Java

package com.example.androidrotateanimation
 
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // assigning id of button which rotates
        // the image in clockwise direction
        val clk_button: Button = findViewById(R.id.clk_rotate_button)
 
        // assigning id of button which rotates
        // the image in anti-clockwise direction
        val anticlk_button: Button = findViewById(R.id.anticlk_rotate_button)
 
        // assigning id of imageview
        // which is to be rotated
        val image: ImageView = findViewById(R.id.imageView)
 
        // actions to be performed when
        // "rotate clockwise" button is clicked
        clk_button.setOnClickListener()
        {
 
            // loading the animation of
            // rotate_clockwise.xml file into a variable
            val clk_rotate = AnimationUtils.loadAnimation(
                this,
                R.anim.rotate_clockwise
            )
 
            // assigning that animation to
            // the image and start animation
            image.startAnimation(clk_rotate)
        }
 
        // actions to be performed when
        // "rotate anticlockwise" button is clicked
        anticlk_button.setOnClickListener()
        {
 
            // loading the animation of
            // rotate_anticlockwise.xml file into a variable
            val anticlk_rotate = AnimationUtils.loadAnimation(
                this,
                R.anim.rotate_anticlockwise
            )
 
            // assigning that animation to
            // the image and start animation
            image.startAnimation(anticlk_rotate)
        }
    }
}

Ejecutar como emulador

Publicación traducida automáticamente

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