用Jetpack Compose创建一个自定义的动画微光效果

波光粼粼的效果给应用程序中的特定部分带来了吸引人的外观。当应用程序的内容正在加载时，它被用来作为一个占位符。

这些内容可以来自互联网或设备的本地存储。当数据被获取时，闪烁效果停止，数据被显示出来。

在本教程中，我们将在Jetpack Compose中创建一个动画的闪亮效果。

前提条件

要跟上本教程，读者应该。

安装了[Android Studio]。
对[Kotlin]编程语言有一定了解。
对使用[Jetpack Compose]构建Android应用程序有一定了解和经验。

目标

在本教程结束时，读者将能够。

使用Jetpack Compose创建Shimmer效果。
创建Shimmer网格项目。
自定义Shimmer的时间、颜色和动画效果。

术语

在本教程中，你会遇到以下Compose的术语。

Modifier - 该属性用于改变一个组件的外观。
Composables - 以编程方式定义一个应用程序的用户界面的函数。它们描述了它应该如何出现。
Spacer - 它是一个组件，在用户界面上的对象之间显示一个空的空间。
Row - 在Compose中，，使项目水平对齐。row
Column - 垂直排列的项目。
Easing - 缓和是一种调整动画分数的方式。它决定了动画在开始-结束互操作时的加速度。

让我们开始吧。

第1步 - 创建一个新的Compose项目

要创建一个新的Compose项目，启动Android Studio并选择New Project ，然后选择Compose Activity 。将其命名为ShimmerDemo ，并点击finish ，以构建该项目。

等待，直到构建完成。

Create Project-1

Create Project-2

第2步 - 创建一个新的Kotlin文件

右键单击应用程序的包文件夹，创建一个新的Kotlin文件。把这个文件命名为Shimmer ，或者其他你选择的名字。

在Shimmer 文件中，我们将创建一个可组合的函数，定义Shimmer的出现方式。

我们将在一个函数中声明一个用于我们的画笔工具的颜色列表。这些颜色的排列方式是，较浅的颜色在中心位置。这样就有了一些视觉吸引力。

在本教程中，我们将使用灰色，但对于你的项目，你可以使用你选择的颜色。

可组合的LoadingShimmerEffect() 函数将看起来如下。

@Composable
fun LoadingShimmerEffect(){

   //These colors will be used on the brush. The lightest color should be in the middle

   val gradient = listOf(
       Color.LightGray.copy(alpha = 0.9f), //darker grey (90% opacity)
       Color.LightGray.copy(alpha = 0.3f), //lighter grey (30% opacity)
       Color.LightGray.copy(alpha = 0.9f)
   )
   
   val transition = rememberInfiniteTransition() // animate infinite times

   val translateAnimation = transition.animateFloat( //animate the transition
       initialValue = 0f,
       targetValue = 1000f,
       animationSpec = infiniteRepeatable(
           animation = tween(
               durationMillis = 1000, // duration for the animation
               easing = FastOutLinearInEasing
           )
       )
   )
   val brush = linearGradient(
       colors = gradient,
       start = Offset(200f, 200f),
       end = Offset(x = translateAnimation.value,
       y = translateAnimation.value)
   )
   ShimmerGridItem(brush = brush)
}

rememberInfiniteTransition() 是一个可组合的函数，它可以无限地将闪光点变成动画。translateAnimation 将用所提供的值来动画化粼粼。

translateAnimation 输入 , 和参数。动画将从到，然后重复。initialValue targetValue animationSpec initialValue targetValue

在动画过程中，如果initialValue 发生变化，动画将以新的值重新开始。这也适用于targetValue 的变化。因此，该动画将没有一致性。

你可以使用durationMillis ，为你的闪亮效果定制延迟时间。在我们的例子中，我们指定的值是1000 milliseconds 。这相当于1秒钟。

对于动画的规格，你可以使用你选择的任何animationSpec 。你可以指定要做动画的数据类型，以及动画配置。

对于easing ，你可以选择任何你想在你的应用程序中应用的类型。

第3步 - 创建微光网格项目

首先，创建一个名为ShimmerGridItem() 的Composable 函数。这个函数将定义我们的单个微光项目将如何出现在屏幕上。

我们将创建一个包含几个形状的单行。然后我们将使用这些形状来实现我们的闪亮效果。

代码将如下。

@Composable
fun ShimmerGridItem(brush: Brush) {
   Row(modifier = Modifier
       .fillMaxSize()
       .padding(all = 10.dp), verticalAlignment = Alignment.Top) {

       Spacer(modifier = Modifier
           .size(80.dp)
           .clip(RoundedCornerShape(10.dp))
           .background(brush)
       )
       Spacer(modifier = Modifier.width(10.dp))
       Column(verticalArrangement = Arrangement.Center) {
           Spacer(modifier = Modifier
               .height(20.dp)
               .clip(RoundedCornerShape(10.dp))
               .fillMaxWidth(fraction = 0.5f)
               .background(brush)
           )

           Spacer(modifier = Modifier.height(10.dp)) //creates an empty space between
           Spacer(modifier = Modifier
               .height(20.dp)
               .clip(RoundedCornerShape(10.dp))
               .fillMaxWidth(fraction = 0.7f)
               .background(brush)
           )

           Spacer(modifier = Modifier.height(10.dp)) //creates an empty space between 
           Spacer(modifier = Modifier
               .height(20.dp)
               .clip(RoundedCornerShape(10.dp))
               .fillMaxWidth(fraction = 0.9f)
               .background(brush))
       }
   }
}

在上面的函数中，我们已经创建了一个包含所有我们需要的项目的单行。这些项目是一个代表图像占位符的形状和另外三个圆形的形状，作为文本占位符。

请确保你在LoadingShimmerEffect() 函数内调用ShimmerGridItem() 方法。

在预览时，我们刚刚创建的行将显示如下。

Row preview

预览

在屏幕上进行预览的方法如下。

@Composable
@Preview(showBackground = true)
fun ShimmerPreview(){
   ShimmerGridItem(brush = linearGradient(
       listOf(
           Color.LightGray.copy(alpha = 0.9f),
           Color.LightGray.copy(alpha = 0.4f),
           Color.LightGray.copy(alpha = 0.9f)
       )
     )
   )
}

注意：以上所有的函数都在我们创建的同一个Kotlin文件中。即：Shimmer.kt 。

@Preview 功能是由Android Studio提供的，以提供可组合的预览。将它设置为 "true "将使可组合的函数出现在设计屏幕上。

如果预览没有呈现，在应用级build.gradle 。

implementation "androidx.compose.ui:ui-tooling:1.0.5"

同步你的项目并等待构建完成。你将能够在设计屏幕上看到你的设计预览。这提供了你和可合成物之间的互动。

不过这种互动模式有一些限制。其中一些是。

既没有网络也没有文件访问。
不是所有的Context API都可用。

第4步 - MainActivity.kt

为了在物理设备/模拟器上运行我们的应用程序，确保在MainActivity.kt 文件中添加以下内容。

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           ShimmerTheme {
               Column {
                   repeat(8) {
                       Shimmer()
                   }
               }
           }
       }
   }
}

注意：ShimmerTheme 是由Android Studio创建的。如果你给你的应用程序起了另一个名字，它将显示为YourAppNameTheme

在ShimmerTheme 里面，我们创建了一个column ，并重复了8次Shimmer 。这将显示我们的单个shimmer网格项目八次。

在数据被成功获取后，确保你停止了shimmer效果。这将使数据显示在屏幕上。

总结

在Jetpack Compose中创建一个闪闪发光的效果很容易。你可以创建你自己的设计、颜色和延迟时间的闪亮效果，使你的应用程序对用户更有吸引力。

如何用Jetpack Compose创建一个自定义的动画微光效果