我想使用Jetpack Compose构建AirBnB应用中的这个神奇按钮动画。
不幸的是,最近动画/转换API被改变了,并且几乎没有文档。有人能帮助我找到实现此按钮按下动画的正确方法吗?
编辑:根据 @Amirhosein 的答案,我已经开发了一个几乎与Airbnb示例完全相同的按钮。
代码:
![1](https://istack.dev59.com/QsY0m.gif)
代码:
@Composable
fun AnimatedButton() {
val boxHeight = animatedFloat(initVal = 50f)
val relBoxWidth = animatedFloat(initVal = 1.0f)
val fontSize = animatedFloat(initVal = 16f)
fun animateDimensions() {
boxHeight.animateTo(45f)
relBoxWidth.animateTo(0.95f)
// fontSize.animateTo(14f)
}
fun reverseAnimation() {
boxHeight.animateTo(50f)
relBoxWidth.animateTo(1.0f)
//fontSize.animateTo(16f)
}
Box(
modifier = Modifier
.height(boxHeight.value.dp)
.fillMaxWidth(fraction = relBoxWidth.value)
.clip(RoundedCornerShape(8.dp))
.background(Color.Black)
.clickable { }
.pressIndicatorGestureFilter(
onStart = {
animateDimensions()
},
onStop = {
reverseAnimation()
},
onCancel = {
reverseAnimation()
}
),
contentAlignment = Alignment.Center
) {
Text(text = "Explore Airbnb", fontSize = fontSize.value.sp, color = Color.White)
}
}
视频:
很遗憾,我无法正确地使文本动画化,因为目前它看起来非常糟糕。
selected.value = false
以处理MotionEvent.ACTION_CANCEL
,这样如果我在没有抬起手指的情况下将手指从按钮上拖出去,动画就会重置。如果没有它,按钮仍然会认为它是“选定的”,即使它实际上并不是。 - trodtrue
的.pointerInteropFilter
将会阻止onClick
事件的触发。如果可以撤回我的点赞,我会这么做的。 - trod.pointerInteropFilter
如下,似乎可以同时提供动画和点击处理:.pointerInteropFilter { if (isEnabled) { when (it.action) { MotionEvent.ACTION_DOWN -> { isPressed = true } MotionEvent.ACTION_UP -> { isPressed = false onClick() } MotionEvent.ACTION_CANCEL -> { isPressed = false } } } else { isPressed = false } true },
- trod