Android Compose 实现无限循环动画
要实现无限循环动画,可以使用 Android Compose 中的 animate*AsState 函数和 LaunchedEffect 函数。下面是一个示例代码,实现一个无限循环的闪烁动画:
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Composable
fun BlinkingAnimation() {
val color by animateColorAsState(
targetValue = if (isBlinking) Color.Red else Color.Transparent,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 500),
repeatMode = RepeatMode.Reverse
)
)
LaunchedEffect(Unit) {
isBlinking = true
onDispose { isBlinking = false }
}
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
Canvas(modifier = Modifier.fillMaxSize()) {
drawCircle(
color = color,
radius = 50.dp.toPx(),
center = Offset(size.width / 2, size.height / 2)
)
}
}
}
var isBlinking by mutableStateOf(false)
在上面的代码中,我们使用 animateColorAsState 函数来创建一个动画状态,根据 isBlinking 的值来切换颜色。然后,我们使用 infiniteRepeatable 函数来创建一个无限循环的动画,使用 tween 指定动画的持续时间为 500 毫秒,并且在动画结束后反向播放。最后,我们使用 LaunchedEffect 函数来在组件被创建时启动动画,并在组件被销毁时停止动画。
在 Canvas 中,我们使用 drawCircle 函数来绘制一个圆,颜色根据动画状态变化。这样就实现了一个无限循环的闪烁动画。
你可以将上述代码添加到 Compose 项目中的任何组件中,然后在 UI 中使用 BlinkingAnimation 组件来显示动画效果。
原文地址: https://www.cveoy.top/t/topic/qjIj 著作权归作者所有。请勿转载和采集!