En Android, podemos crear animaciones de nuestra elección para mostrar una entrada, en tránsito o salida de un elemento o una vista. La animación incorporada más comúnmente es Circular ProgressBar, donde un animador dibuja un círculo que indica el progreso de la tarea ejecutada.
En este artículo, le mostraremos cómo puede crear una animación de este tipo en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.geeksforgeeks.jccirclecompleteanimation
import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
@SuppressLint("RememberReturnType")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Creating a Simple Scaffold
// Layout for the application
Scaffold(
// Creating a Top Bar
topBar = { TopAppBar(title = { Text("GFG | Circle Animation", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
// Creating Content
content = {
// Creating a Column Layout
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Declaring circle radius
val radius = 200f
// Creating animation
val animateFloat = remember { Animatable(0f) }
LaunchedEffect(animateFloat) {
animateFloat.animateTo(
targetValue = 1f,
animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
}
// Creating Arc with useCenter as True
Row{
Canvas(modifier = Modifier.width(100.dp).height(100.dp)){
drawArc(
color = Color.Black,
startAngle = 0f,
sweepAngle = 360f * animateFloat.value,
useCenter = true,
size = Size(radius * 2 , radius * 2),
style = Stroke(2.0f)
)
}
}
// Adding a Space of height 100dp
Spacer(modifier = Modifier.height(100.dp))
// Creating Arc with useCenter as False
Row{
Canvas(modifier = Modifier.width(100.dp).height(100.dp)){
drawArc(
color = Color.Black,
startAngle = 0f,
sweepAngle = 360f * animateFloat.value,
useCenter = false,
size = Size(radius * 2 , radius * 2),
style = Stroke(2.0f)
)
}
}
}
}
)
}
}
}
Producción:
Puede ver que podemos crear una animación que barre un círculo.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA