用Compose撸一个随手势移动眼珠的笑脸😁

Compose：打造跟随手势移动的眼珠

在 Compose 的世界中，我们能够创造出各种引人入胜且互动的体验。其中一个有趣的项目便是制作一个跟随手势移动眼珠的动画。让我们深入了解其实现原理和步骤。

实现原理

我们利用 Canvas 的绘图功能，配合动画 API 来实现这个眼珠移动效果。Canvas 允许我们在 Compose 画布上绘制图形，而动画 API 则让我们能够平滑地改变这些图形的位置。

具体步骤

1. 设置项目环境

首先，创建一个新的 Compose 项目并添加必要的依赖项：

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-beta02'
    implementation 'androidx.compose.material:material:1.0.0-beta02'
    implementation 'androidx.activity:activity-compose:1.3.0-alpha07'
}

2. 定义眼珠组件

接下来，在 MainActivity.kt 中定义一个名为 Eye 的 Compose 组件：

@Composable
fun Eye() {
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    val eyeRadius = 50.dp.toPx()

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInteropFilter {
            if (it.isDown) {
                val touchX = it.x
                val touchY = it.y
                offsetX = touchX - eyeRadius / 2
                offsetY = touchY - eyeRadius / 2
            }
            true
        }) {
        drawCircle(
            color = Color.White,
            radius = eyeRadius,
            center = Offset(eyeRadius / 2, eyeRadius / 2)
        )
        drawCircle(
            color = Color.Black,
            radius = 20.dp.toPx(),
            center = Offset(offsetX + eyeRadius / 2, offsetY + eyeRadius / 2)
        )
    }
}

在 Eye 组件中，我们使用 Canvas 组件来绘制眼珠，并在其 modifier 中添加了 pointerInteropFilter。这个过滤器允许我们拦截手势事件，并根据手指的移动更新眼珠的位置。

3. 添加动画

要让眼珠跟随手势平滑移动，我们利用 animateFloatAsState 动画 API：

val offsetX by remember { mutableStateOf(0f) }
val offsetY by remember { mutableStateOf(0f) }

这些 remember 函数负责记住眼珠的偏移量，以便我们在绘制 Canvas 时可以使用它们。

4. 更新眼珠位置

当手指在屏幕上移动时，pointerInteropFilter 会更新 offsetX 和 offsetY 的值：

if (it.isDown) {
    val touchX = it.x
    val touchY = it.y
    offsetX = touchX - eyeRadius / 2
    offsetY = touchY - eyeRadius / 2
}

通过不断更新这些偏移量，我们确保眼珠始终跟随手指的位置。

结论

使用 Compose 创建跟随手势移动的眼珠是一个有趣的项目，展示了其动画和交互能力。通过利用 Canvas 和动画 API，我们可以轻松创建复杂且引人入胜的体验。

常见问题解答

1. 如何改变眼珠的半径或颜色？

通过修改 eyeRadius 或 Color 值即可更改眼珠的外观。

2. 我可以在眼珠上添加其他图形吗？

当然，你可以通过在 Canvas 中添加额外的 draw 调用来绘制其他图形。

3. 我可以让眼珠自动跟随手指吗？

使用 pointerInteropFilter 可以实现这一点，但需要一些额外的代码。

4. 这个项目可以在哪些平台上运行？

Compose 应用程序可以在 Android、桌面和 Web 平台上运行。

5. 我可以将这个项目用作自定义壁纸吗？

只要你愿意，你可以将这个项目用作壁纸。