compose的闪烁边框动画

在为Android TV的Launcher添加卡片移动功能时，增加了个边框循环闪烁的动画，类似呼吸灯的效果。

此处我是使用了androidx.tv.material3库下的Card可组合函数，增加光晕的方式是修改了Card可组合函数的传参glow。Card可组合函数的源码如下。

glow函数包含三个传参，分别代表默认、聚焦、点击状态下的光晕。

 默认的情况下，三种状态都不显示光晕，即Glow.None。

根据情景，我修改了聚焦状态下的glow。

Card(
    ...
    glow = CardDefaults.glow(
        focusedGlow = Glow(
            elevationColor = Color.White,
            elevation = if (isMoving) size else 0.dp
        )
    ),
    ...
)

为了实现呼吸的效果，需要修改光晕的大小；

而为了实现循环动画的效果，我们需要开启一个无限循环的动画。

在此处我使用了size来变更光晕的大小，并无限循环size变量的大小变更。

    val size by rememberInfiniteTransition(label = "size").animateValue(
        initialValue = 0.dp,
        targetValue = 20.dp,
        typeConverter = Dp.VectorConverter,
        animationSpec = infiniteRepeatable(
            animation = tween(1000),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animateValue from size"
    )

参考资料：

Jetpack Compose(6)——动画 - SharpCJ - 博客园 (cnblogs.com)

Compose 中的动画  |  Jetpack Compose  |  Android Developers