32. Compose 优美的触摸动画

最新推荐文章于 2022-10-13 09:39:47 发布

会编程的猩猩

最新推荐文章于 2022-10-13 09:39:47 发布

阅读量211

点赞数

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

本文链接：https://blog.csdn.net/u010436867/article/details/125423027

版权

Android Compose 专栏收录该内容

49 篇文章 23 订阅

订阅专栏

@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)
            )
        }
    }
}