requisitos previos:
- Conocimientos básicos de Kotlin
- Conocimientos básicos de Jetpack Compose
Shimmer Animation fue creado por Facebook para mostrar la pantalla de carga mientras se obtienen las imágenes del servidor. Ahora vemos animación brillante en muchos lugares. En este artículo, veremos la implementación de la animación shimmer usando el nuevo Jetpack Compose . A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.
Implementación paso a paso
Paso 1: cree un nuevo proyecto (o utilícelo en el proyecto Compose existente)
Para crear un nuevo proyecto en la versión Android Studio Canary, consulte el artículo Cómo crear un nuevo proyecto en la versión Android Studio Canary con Jetpack Compose.
Paso 2: Agregar colores
Antes de pasar a la animación de codificación, agregue los colores que requerirá la animación brillante. Abra Colors.kt (Presente en ui/theme/Colors.kt)
val ShimmerColorShades = listOf(
Color.LightGray.copy(0.9f),
Color.LightGray.copy(0.2f),
Color.LightGray.copy(0.9f)
)
Es una lista de colores de fondo de compostable que se va a animar, observe el color en el índice 1, esta parte cambiará su ubicación, dando el efecto de brillo.
Paso 3: trabajar con el archivo MainActivity.kt
Cree una función componible en la que se llevará a cabo la animación.
Kotlin
@Composable
fun ShimmerItem(
brush: Brush
) {
// Column composable containing spacer shaped like a rectangle,
// set the [background]'s [brush] with the brush receiving from [ShimmerAnimation]
// Composable which is the Animation you are gonna create.
Column(modifier = Modifier.padding(16.dp)) {
Spacer(
modifier = Modifier
.fillMaxWidth()
.size(250.dp)
.background(brush = brush)
)
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(30.dp)
.padding(vertical = 8.dp)
.background(brush = brush)
)
}
}
Vamos a crear la animación. Cree una nueva función componible.
Kotlin
@Composable
fun ShimmerAnimation(
) {
/*
Create InfiniteTransition
which holds child animation like [Transition]
animations start running as soon as they enter
the composition and do not stop unless they are removed
*/
val transition = rememberInfiniteTransition()
val translateAnim by transition.animateFloat(
/*
Specify animation positions,
initial Values 0F means it
starts from 0 position
*/
initialValue = 0f,
targetValue = 1000f,
animationSpec = infiniteRepeatable(
// Tween Animates between values over specified [durationMillis]
tween(durationMillis = 1200, easing = FastOutSlowInEasing),
RepeatMode.Reverse
)
)
/*
Create a gradient using the list of colors
Use Linear Gradient for animating in any direction according to requirement
start=specifies the position to start with in cartesian like system Offset(10f,10f) means x(10,0) , y(0,10)
end = Animate the end position to give the shimmer effect using the transition created above
*/
val brush = Brush.linearGradient(
colors = ShimmerColorShades,
start = Offset(10f, 10f),
end = Offset(translateAnim, translateAnim)
)
ShimmerItem(brush = brush)
}
Llame al ShimmerItem que se va a animar y pase el objeto Brush,
Paso 4: coloque el ShimmerItem animado en la pantalla
En clase MainActivity
Kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShimmerAnimationTheme(darkTheme = false) {
Surface(color = MaterialTheme.colors.background) {
/*
Lazy column as I am adding multiple items for display purpose
create you UI according to requirement
*/
LazyColumn {
/*
Lay down the Shimmer Animated item 5 time
[repeat] is like a loop which executes the body
according to the number specified
*/
repeat(5) {
item {
ShimmerAnimation()
}
}
}
}
}
}
}
}
Y hemos terminado. Este es el código final del archivo MainActivity.kt .
Kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.shimmeranimation.ui.theme.ShimmerAnimationTheme
import com.example.shimmeranimation.ui.theme.ShimmerColorShades
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShimmerAnimationTheme(darkTheme = false) {
Surface(color = MaterialTheme.colors.background) {
/*
Lazy column as I am adding multiple items for display purpose
create you UI according to requirement
*/
LazyColumn {
/**
Lay down the Shimmer Animated item 5 time
[repeat] is like a loop which executes the body
according to the number specified
*/
repeat(5) {
item {
ShimmerAnimation()
}
}
}
}
}
}
}
}
@Composable
fun ShimmerAnimation(
) {
/*
Create InfiniteTransition
which holds child animation like [Transition]
animations start running as soon as they enter
the composition and do not stop unless they are removed
*/
val transition = rememberInfiniteTransition()
val translateAnim by transition.animateFloat(
/*
Specify animation positions,
initial Values 0F means it starts from 0 position
*/
initialValue = 0f,
targetValue = 1000f,
animationSpec = infiniteRepeatable(
/*
Tween Animates between values over specified [durationMillis]
*/
tween(durationMillis = 1200, easing = FastOutSlowInEasing),
RepeatMode.Reverse
)
)
/*
Create a gradient using the list of colors
Use Linear Gradient for animating in any direction according to requirement
start=specifies the position to start with in cartesian like system Offset(10f,10f) means x(10,0) , y(0,10)
end= Animate the end position to give the shimmer effect using the transition created above
*/
val brush = Brush.linearGradient(
colors = ShimmerColorShades,
start = Offset(10f, 10f),
end = Offset(translateAnim, translateAnim)
)
ShimmerItem(brush = brush)
}
@Composable
fun ShimmerItem(
brush: Brush
) {
/*
Column composable shaped like a rectangle,
set the [background]'s [brush] with the
brush receiving from [ShimmerAnimation]
which will get animated.
Add few more Composable to test
*/
Column(modifier = Modifier.padding(16.dp)) {
Spacer(
modifier = Modifier
.fillMaxWidth()
.size(250.dp)
.background(brush = brush)
)
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(30.dp)
.padding(vertical = 8.dp)
.background(brush = brush)
)
}
}
Producción:
Obtenga el proyecto completo .
Publicación traducida automáticamente
Artículo escrito por sunny52525 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA