32. Compose 优美的触摸动画

最新推荐文章于 2025-02-25 23:10:22 发布

会编程的猩猩

最新推荐文章于 2025-02-25 23:10:22 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： Android Compose 文章标签： Compose 动画

本文链接：https://blog.youkuaiyun.com/u010436867/article/details/125423027

Android Compose 专栏收录该内容

51 篇文章

订阅专栏

该博客介绍了如何在Jetpack Compose中实现一个触摸跟随动画，通过pointerInput和Animatable实现触控点的实时跟踪，背景颜色变化及小圆点跟随手指移动的效果，展示了Compose在UI交互上的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Composable
fun TouchAnimationPage(navCtrl: NavHostController, title: String) {

    val currentPositionColor = Color.White
    val lastPositionColor = Color.LightGray
    var cacheOffset by remember() {
        mutableStateOf(Offset.Zero)
    }

    var lastOffset by remember() {
        mutableStateOf(Offset.Zero)
    }

    val animatedOffset = remember {
        Animatable(Offset(0f, 0f), Offset.VectorConverter)
    }
    val pxValue = with(LocalDensity.current) { 40.dp.toPx() } / 2f

    CommonToolbar(navCtrl, title) {
        Box(modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Magenta)
            .pointerInput(Unit) {
                coroutineScope {
                    while (true) {
                        val offset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        lastOffset = cacheOffset
                        cacheOffset = offset
                        launch {
                            animatedOffset.animateTo(
                                offset,
                                animationSpec = spring(stiffness = Spring.StiffnessLow)
                            )
                        }
                    }
                }
            }
            .drawBehind {
                drawCircle(color = currentPositionColor, radius = pxValue, center = cacheOffset)
                drawCircle(color = lastPositionColor, radius = pxValue, center = lastOffset)
            }
        ) {
            Box(
                Modifier
                    .offset {
                        IntOffset(
                            (animatedOffset.value.x - pxValue).roundToInt(),
                            (animatedOffset.value.y - pxValue).roundToInt()
                        )
                    }
                    .size(40.dp)
                    .background(MaterialTheme.colors.primary, CircleShape)
            )
        }
    }
}