Compose 学习帧动画

最新推荐文章于 2024-05-17 18:09:22 发布

淼miaomiao

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量188

点赞数 2

文章标签：学习 android kotlin

本文链接：https://blog.csdn.net/m0_69564069/article/details/137551918

版权

1.介绍：飞行棋项目需要掷骰子动画，故学着用Compose做了一个简单帧动画。此为学习笔记，大佬勿喷。

2.效果展示：

Composable 组件动画可以在Android Studio 中预览，

骰子模型是我自己用Blender建模做的，凑合看哈哈。

点击Play会播放一次动画，总时长设置为1s。

最后为了偷懒，直接将当前帧设置为了第一帧来做到重播，因此有些不流畅。

3.代码

@Composable
fun DiceAnimation() {
    val frameList = listOf(
        R.drawable.frame1,
        R.drawable.frame2,
        R.drawable.frame3,
        R.drawable.frame4,
        R.drawable.frame5,
        R.drawable.frame6,
        R.drawable.frame7,
        R.drawable.frame8,
        R.drawable.frame9,
        R.drawable.frame10,
        R.drawable.frame11,
        R.drawable.frame12,
        R.drawable.frame13,
        R.drawable.frame14,
        R.drawable.frame15,

    )
    var currentFrame = remember { Animatable(0f) }
    var isPlaying by remember { mutableStateOf(false) }
    LaunchedEffect(isPlaying) {
        if (isPlaying) {
            currentFrame.animateTo(
                targetValue = (frameList.size - 1).toFloat(),
                animationSpec = repeatable(
                    animation = keyframes {
                        durationMillis = 1000  // the total animation duration
                    },
                    repeatMode = RepeatMode.Restart,
                    iterations = 1
                )
            )
            isPlaying=false
            currentFrame.snapTo(0f)

        }

    }


    Box(
        modifier = Modifier
            .size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Column {
            Image(
                painter = painterResource(id = frameList[currentFrame.value.toInt()]),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )
            TextButton(
                modifier = Modifier
                    .size(80.dp),
                onClick = {

                    isPlaying = true
                }
            ) {
                Text(text = "Play")
            }
        }

    }
}

这只是很简单的示例，仅供参考。