标签: android-jetpack-compose-animation

如何为撰写中的框制作彩虹边框动画，我看到的所有示例都是针对圆形的，并且它们使用旋转和绘制，但我真正需要的是为撰写中的框制作相同的动画。

谢谢

使用旋转但它没有 \xc2\xb4t 工作

我正在尝试在 Jetpack Compose 中制作形状的晃动动画。我想在用户输入无效的 Pin 码时使用此动画来显示错误。但我能找到的只是滑入、滑出动画和一些缩放动画。我有什么想法可以做到这一点吗？

更新： @Thracian 回答后。我使用如下代码，水平摇动我的物品：

fun Modifier.shake(enabled: Boolean, onAnimationFinish: () -> Unit) = composed(
    factory = {
        val distance by animateFloatAsState(
            targetValue = if (enabled) 15f else 0f,
            animationSpec = repeatable(
                iterations = 8,
                animation = tween(durationMillis = 50, easing = LinearEasing),
                repeatMode = RepeatMode.Reverse
            ),
            finishedListener = { onAnimationFinish.invoke() }
        )

        Modifier.graphicsLayer {
            translationX = if (enabled) distance else 0f
        }
    },
    inspectorInfo = debugInspectorInfo {
        name = "shake"
        properties["enabled"] = enabled
    }
)

我如何使用 JetpackCompose 在 android 中绘制矩形进度条（如下图所示）作为 CircleProgress 指示器 https://drive.google.com/file/d/1SXZcBp7uAesl-i6gHqFNXNpnc54Z6vdI/view?usp=share_link

CircularProgressIndicator(strokeWidth=10.dp,
                          progress = 1.0f,
                            color = Red,
                           modifier = Modifier.height(200.dp).width(200.dp).align(Alignment.Center))

当前代码

@Composable
fun TextDemo() {
    var selectedIndex by remember {
        mutableIntStateOf(0)
    }
    Row {
        TabText(
            text = "First",
            isSelected = selectedIndex == 0,
            onClick = {
                selectedIndex = 0
            },
        )
        TabText(
            text = "Second",
            isSelected = selectedIndex == 1,
            onClick = {
                selectedIndex = 1
            },
        )
    }
}

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val tabTextColor by animateColorAsState(
        targetValue = if (isSelected) {
            Color.Red
        } else {
            Color.Black
        },
        animationSpec = …

我已经使用了重量或改变了无限动画的宽度，但这不是下面gif中显示的效果。如何在 Jetpack Compose 中实现它？

初始状态看起来像这样 ( animatedOffset = 0f)

我想得到1f反向梯度：

当前代码：

val transition = rememberInfiniteTransition(label = "NavIconGradientAnim")

val animatedOffset by transition.animateFloat(
    initialValue = 0f, targetValue = 1f,
    label = "NavIconGradientAnimOffset",
    animationSpec = infiniteRepeatable(
        animation = tween(1500, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)
Image(
    painterResource(id = item.icon),
    contentDescription = null,
    modifier = Modifier.drawWithCache {
        onDrawWithContent {
            with(drawContext.canvas.nativeCanvas) {
                val angle = 45f
                val endX = drawContext.size.width
                val endY = (endX * kotlin.math.tan(Math.toRadians(angle.toDouble()))).toFloat()

                val checkPoint = saveLayer(null, null)
                drawContent()
                val gradient …

Column我想在完成所有动画后将的大小设为0.dp 。在所有孩子都躲起来之后，我试图将我的尺寸缩小Column到 0.dp。我尝试了下面的这段代码

@Preview(showBackground = true)
@Composable
fun MoveText() {
    var columnHeightPx by remember {
        mutableStateOf(0f)
    }
    var visible by remember { mutableStateOf(true) }
    val iconOffsetAnimation: Dp by animateDpAsState(
        if (visible) 13.dp else 0.dp,
        tween(1000)
    )
    val textOffsetAnimation: Dp by animateDpAsState(
        if (visible) 6.dp else 0.dp,
        tween(1000)
    )
    val viewAlpha: Float by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        animationSpec = tween(
            durationMillis = 1000,
        )
    )
    ScrollComposeTheme {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = …