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.
La jerarquía de clases de la clase RotateAnimation en 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
- Haga clic en Archivo, luego en Nuevo => Nuevo proyecto.
- Seleccione el idioma como Kotlin.
- 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