Jetpack Compose教程-水位控制小部件
Jetpack Compose教程-水位控制小部件
Apple的应用程序和小部件一直是设计的典范，也给我们的"复制系列：活动应用"和"卡片应用"提供了灵感。当他们发布了新款苹果手表Ultra时，它里面深度测量小部件的设计引起了我们的兴趣，我们觉得在安卓手机上也能模仿一下！就像我们通常在安卓复制的挑战中一样，我们使用了Jetpack Compose框架。
本文将向您介绍我们是如何实现以下内容的：创建波浪效果、使水围绕文本流动，并混合颜色。无论您是初学者还是已经熟悉Jetpack Compose的人，这些内容都会对您有所帮助。
Water Level
首先，我们来考虑一个最简单的问题——如何计算和实现水位的动画效果。
enum class WaterLevelState {
StartReady,
Animating,
}
接下来，我们定义了动画的持续时间和初始状态。
val waveDuration by rememberSaveable { mutableStateOf(waveDurationInMills) }
var waterLevelState by remember { mutableStateOf(WaterLevelState.StartReady) }
之后，我们需要确定水的变化方式。这样可以在屏幕上以文本形式记录进展，并绘制水位。
val waveProgress by waveProgressAsState(
timerState = waterLevelState,
timerDurationInMillis = waveDuration
)
现在，我们来仔细看一下waveProgressAsState。我们使用animatable是因为它能提供更多的控制和自定义选项。例如，我们可以为不同的状态指定不同的动画参数。
接下来，我们要计算需要在屏幕上绘制水边缘的坐标：
val waterLevel by remember(waveProgress, containerSize.height) {
derivedStateOf {
(waveProgress * containerSize.height).toInt()
}
}
所有这些初步工作完成后，我们可以开始创建真实的波浪。
Waves
模拟波浪最常见的方法是使用以一定速度水平移动的正弦图。
我们希望它看起来更加逼真，而且它必须流动到屏幕上的元素上，因此我们需要一种更复杂的方法。实现的主要思想是定义一组表示波浪高度的点。这些值被动画化以创建波浪效果。
首先，我们创建一个包含点以存储值的列表。
val points = remember(spacing, containerSize) {
derivedStateOf {
(-spacing..containerSize.width + spacing step spacing).map { x ->
PointF(x.toFloat(), waterLevel)
}
}
}
接下来，让我们来讨论正常情况下水流顺畅、没有阻碍物的情况。这时，我们只需将水位数值填入其中。其他情况我们稍后再讨论。
LevelState.PlainMoving -> {
points.value.map {
it.y = waterLevel
}
}
考虑一个动画，它将改变每个点的高度。如果对所有的点都进行动画处理，会严重耗费性能和电池。为了节省资源，我们只用了一小部分浮点数动画数值。
@Composable
fun createAnimationsAsState1(
pointsQuantity: Int,
): MutableList<State<Float>> {
val animations = remember { mutableListOf<State<Float>>() }
val random = remember { Random(System.currentTimeMillis()) }
val infiniteAnimation = rememberInfiniteTransition()
repeat(pointsQuantity / 2) {
val durationMillis = random.nextInt(2000, 6000)
animations += infiniteAnimation.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis),
repeatMode = RepeatMode.Reverse,
)
)
}
return animations
}
为了防止动画每15个点重复一次，并使波浪不相同，我们可以设置initialMultipliers。
@Composable
fun createInitialMultipliersAsState(pointsQuantity: Int): MutableList<Float> {
val random = remember { Random(System.currentTimeMillis()) }
return remember {
mutableListOf<Float>().apply {
repeat(pointsQuantity) { this += random.nextFloat() }
}
}
}
现在要添加波浪 - 遍历所有点并计算新的高度。
points.forEachIndexed { index, pointF ->
val newIndex = index % animations.size
var waveHeight = calculateWaveHeight(
animations[newIndex].value,
initialMultipliers[index],
maxHeight
)
pointF.y = pointF.y - waveHeight
}
return points
将initialMultipliers添加到currentSize将减少重复数值的可能性。同时，使用线性插值将有助于平滑地改变高度。
private fun calculateWaveHeight(
currentSize: Float,
initialMultipliers: Float,
maxHeight: Float
): Float {
var waveHeightPercent = initialMultipliers + currentSize
if (waveHeightPercent > 1.0f) {
val diff = waveHeightPercent - 1.0f
waveHeightPercent = 1.0f - diff
}
return lerpF(maxHeight, 0f, waveHeightPercent)
}
现在让我们来看最有趣的部分——如何让水围绕着用户界面元素流动。
交互式水流动
首先，我们定义了水在下降过程中的三种状态。PlainMoving表示水平常流的状态，WaveIsComing表示水逐渐抬升到需要展示流动效果的用户界面元素的时刻，而FlowsAround则表示实际上水已经开始围绕着UI元素流动了。
sealed class LevelState {
object PlainMoving : LevelState()
object FlowsAround : LevelState()
object WaveIsComing: LevelState()
}
我们了解到，如果水位低于物品位置减去缓冲区，那么水位就比物品高。下图中以红色标示了该区域。
fun isAboveElement(waterLevel: Int, bufferY: Float, position: Offset) = waterLevel < position.y - bufferY
当水位与元素水平相同时，开始流动还为时过早。下图中的区域以灰色显示。
fun atElementLevel(
waterLevel: Int,
buffer: Float,
elementParams: ElementParams,
) = (waterLevel >= (elementParams.position.y - buffer)) &&
(waterLevel < (elementParams.position.y + elementParams.size.height * 0.33))
fun isWaterFalls(
waterLevel: Int,
elementParams: ElementParams,
) = waterLevel >= (elementParams.position.y + elementParams.size.height * 0.33) &&
waterLevel <= (elementParams.position.y + elementParams.size.height)
还有一个问题需要考虑 —— 如何计算水流的时间？当水位在蓝色区域时，瀑布和波浪的动画会增加。因此，我们需要确定水位达到元素高度的2/3时的时间。
@Composable
fun rememberDropWaterDuration(
elementSize: IntSize,
containerSize: IntSize,
duration: Long,
): Int {
return remember(
elementSize,
containerSize
) { (((duration * elementSize.height * 0.66) / (containerSize.height))).toInt() }
}
我们来仔细看一下元素周围的水流情况。水的流动形状是基于一个抛物线的，为了教程的简单性我们选择了一个简单的形状。我们用图片中的那些点来描述抛物线的轨迹。我们并没有把抛物线延伸到当前的水位以下（即水平的红线处）。
is LevelState.FlowsAround -> {
val point1 = PointF(
position.x,
position.y - buffer / 5
)
val point2 = point1.copy(x = position.x + elementSize.width)
val point3 = PointF(
position.x + elementSize.width / 2,
position.y - buffer
)
val p = Parabola(point1, point2, point3)
points.value.forEach {
val pr = p.calculate(it.x)
if (pr > waterLevel) {
it.y = waterLevel
} else {
it.y = pr
}
}
让我们来看看瀑布动画：我们将使用相同的抛物线，改变它的高度从初始位置开始，并使用OvershootInterpolator实现更柔和的下落效果。
val parabolaHeightMultiplier = animateFloatAsState(
targetValue = if (levelState == LevelState.WaveIsComing) 0f else -1f,
animationSpec = tween(
durationMillis = dropWaterDuration,
easing = { OvershootInterpolator(6f).getInterpolation(it) }
)
)
在这种情况下，我们使用高度倍增动画，以便最终抛物线的高度变为0。
val point1 by remember(position, elementSize, waterLevel, parabolaHeightMultiplier) {
mutableStateOf(
PointF(
position.x,
waterLevel + (elementSize.height / 3f + buffer / 5) * parabolaHeightMultiplier.value
)
)
}
val point2 by remember(position, elementSize, waterLevel, parabolaHeightMultiplier) {
mutableStateOf(
PointF(
position.x + elementSize.width,
waterLevel + (elementSize.height / 3f + buffer / 5) * parabolaHeightMultiplier.value
)
)
}
val point3 by remember(position, elementSize, parabolaHeightMultiplier, waterLevel) {
mutableStateOf(
PointF(
position.x + elementSize.width / 2,
waterLevel + (elementSize.height / 3f + buffer) * parabolaHeightMultiplier.value
)
)
}
return produceState(
initialValue = Parabola(point1, point2, point3),
key1 = point1,
key2 = point2,
key3 = point3
) {
this.value = Parabola(point1, point2, point3)
}
此外，我们需要改变与界面元素重叠的位置的波浪大小，因为在水落下的瞬间它们会增大，然后缩小至正常尺寸。
val point1 by remember(position, elementSize, waterLevel, parabolaHeightMultiplier) {
mutableStateOf(
PointF(
position.x,
waterLevel + (elementSize.height / 3f + buffer / 5) * parabolaHeightMultiplier.value
)
)
}
val point2 by remember(position, elementSize, waterLevel, parabolaHeightMultiplier) {
mutableStateOf(
PointF(
position.x + elementSize.width,
waterLevel + (elementSize.height / 3f + buffer / 5) * parabolaHeightMultiplier.value
)
)
}
val point3 by remember(position, elementSize, parabolaHeightMultiplier, waterLevel) {
mutableStateOf(
PointF(
position.x + elementSize.width / 2,
waterLevel + (elementSize.height / 3f + buffer) * parabolaHeightMultiplier.value
)
)
}
return produceState(
initialValue = Parabola(point1, point2, point3),
key1 = point1,
key2 = point2,
key3 = point3
) {
this.value = Parabola(point1, point2, point3)
}
波浪的高度在UI元素周围的半径内增加，增加真实感。
val elementRangeX = (position.x - bufferX)..(position.x + elementSize.width + bufferX)
points.forEach { index, pointF ->
if (levelState.value is LevelState.WaveIsComing && pointF.x in elementRangeX) {
waveHeight *= waveMultiplier
}
}
现在是将我们所学的所有内容结合起来，并添加颜色混合。
将所有元素组合在一起
在画布上进行绘画时，有几种方式可以使用混合模式。
首先，我想到的方法是使用位图来绘制路径，并在位图画布上使用混合模式来绘制文本。这种方法使用了 Android 视图中旧的画布实现，所以我们决定采用更直接的方式——使用混合模式来进行颜色混合。首先，我们在画布上绘制了波浪。
Canvas(
modifier = Modifier
.background(Water)
.fillMaxSize()
) {
drawWaves(paths)
}
在实施过程中，我们使用drawIntoCanvas，以便我们可以使用paint.pathEffectCornerPathEffect来平滑波浪。
fun DrawScope.drawWaves(
paths: Paths,
) {
drawIntoCanvas {
it.drawPath(paths.pathList[1], paint.apply {
color = Blue
})
it.drawPath(paths.pathList[0], paint.apply {
color = Color.Black
alpha = 0.9f
})
}
}
为了了解文本占据的空间大小，我们在一个盒子里放置了文本元素。由于布局中的Text元素不支持混合模式，所以我们需要利用混合模式在画布上绘制文本。为此，我们使用drawWithContent修饰器，只在画布上绘制文本，而不会绘制文本元素本身。
为了使混合模式生效，需要创建一个新的图层。我们可以使用.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)*来实现这一点。无论在图形图层上配置了哪些参数，内容的渲染都会首先渲染到一个离屏缓冲区，然后再绘制到目标位置上。
*(这是对我们之前实现的更新，之前我们使用了.graphicsLayer(alpha = 0.99f)的技巧，但在评论中，@romainguy 帮助我们找到了更清晰的解决方案)。
Box(
modifier = modifier
.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
.drawWithContent {
drawTextWithBlendMode(
mask = paths.pathList[0],
textStyle = textStyle,
unitTextStyle = unitTextStyle,
textOffset = textOffset,
text = text,
unitTextOffset = unitTextProgress,
textMeasurer = textMeasurer,
)
}
) {
Text(
modifier = content().modifier
.align(content().align)
.onGloballyPositioned {
elementParams.position = it.positionInParent()
elementParams.size = it.size
},
text = "46FT",
style = content().textStyle
)
}
首先我们绘制文本，然后绘制一条波浪，用作蒙版。这是有关可供开发人员使用的不同混合模式的官方文档。
https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode#SrcIn()
fun DrawScope.drawTextWithBlendMode(
mask: Path,
textMeasurer: TextMeasurer,
textStyle: TextStyle,
text: String,
textOffset: Offset,
unitTextOffset: Offset,
unitTextStyle: TextStyle,
) {
drawText(
textMeasurer = textMeasurer,
topLeft = textOffset,
text = text,
style = textStyle,
)
drawText(
textMeasurer = textMeasurer,
topLeft = unitTextOffset,
text = "FT",
style = unitTextStyle,
)
drawPath(
path = mask,
color = Water,
blendMode = BlendMode.SrcIn
)
}
完整的水位效果如下：
结论
这个实现事实上相当复杂，但这是可以预料的，因为原始素材本身就很复杂。幸运的是，我们能够充分利用原生的Compose工具进行大量操作。你还可以根据需要调整参数，以获得更吸引人的水效果，但我们决定停留在这个概念验证阶段。像往常一样，完整的实现可以在存储库中找到。如果你喜欢这个教程，你还可以在我们的个人资料中找到更多有趣的内容，或者查看如何在Jetpack Compose中复制一个酷炫的dribbble音频应用。