背景
好久没有写文章了,最近又看到了几个效果很不错,现在分享一下。
1.渐变卡片(不知道叫什么名字好)
注意这个Canvas一定不能写在Box的Modifier里,应该写在Box中放在最底层,用于改变背景颜色, 然后在背景颜色改变的同时改变文字的颜色,然后easing用EaseOut,这样效果更佳。 如果把这个easing换成EaseOutBounce,则会出现有趣的效果。
@Composable
fun GradientCard(
modifier: Modifier = Modifier,
) {
val interactionSource = remember { MutableInteractionSource() }
val hover by interactionSource.collectIsHoveredAsState()
val textColor by animateColorAsState(
targetValue = if (hover) Color.White else Color.Black,
animationSpec = tween(durationMillis = 500, easing = EaseOut)
)
val radiusSize by animateFloatAsState(
targetValue = if (hover) 15f else 1f,
animationSpec = tween(durationMillis = 350, easing = EaseOut)//EaseOutBounce
)
Card(
modifier = modifier,
shape = RoundedCornerShape(8.dp),
backgroundColor = Color.Transparent,
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Brush.linearGradient(listOf(Color(195, 230, 236), Color(167, 209, 217)))),
) {
Canvas(
modifier = Modifier
.fillMaxSize()
) {
drawCircle(
color = Color(86, 126, 173),
radius = size.width * 0.1f * radiusSize,
center = Offset(size.width, 0f),
)
}
Column(
modifier = Modifier
.fillMaxSize()
) {
Text(
text = "Product Name",
fontSize = 32.sp,
fontFamily = FontFamily.Cursive,
color = textColor,
maxLines = 1,
modifier = Modifier
.padding(16.dp)
)
Text(
text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat\n" +
"veritatis nobis saepe itaque rerum nostrum aliquid obcaecati odio\n" +
"officia deleniti. Expedita iste et illum, quaerat pariatur consequatur\n" +
"eum nihil itaque!",
fontFamily = FontFamily.Monospace,
color = textColor,
modifier = Modifier.padding(8.dp)
)
}
Icon(
Icons.AutoMirrored.Outlined.ArrowForward,
contentDescription = "ArrowForward",
tint = Color.White,
modifier = Modifier
.padding(4.dp)
.hoverable(interactionSource)
.align(Alignment.TopEnd)
)
}
}
}
2.选中框效果
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SelectedBox() {
var isSelected by remember { mutableStateOf(false) }
// val borderColor by animateColorAsState(if (isSelected) Color(37, 99, 235) else Color.Transparent)
val borderColor by mutableStateOf(if (isSelected) Color(37, 99, 235) else Color.Transparent)
Box(
modifier = Modifier,
contentAlignment = Alignment.Center
) {
Text(
text = "123321 select me",
fontSize = 32.sp,
color = Color.White,
modifier = Modifier
.border(2.dp, borderColor)
.padding(4.dp)
.onClick {
isSelected = !isSelected
}
)
if (isSelected) {
Canvas(
modifier = Modifier
.matchParentSize()
) {
drawPoints(
listOf(
Offset(0f + 2f, 0f + 2f),
Offset(size.width - 2f, 0f + 2f),
Offset(0f + 2f, size.height - 2f),
Offset(size.width - 2f, size.height - 2f),
),
PointMode.Points,
Color(37, 99, 235),
10f,
cap = StrokeCap.Butt,
)
drawPoints(
listOf(
Offset(0f + 2f, 0f + 2f),
Offset(size.width - 2f, 0f + 2f),
Offset(0f + 2f, size.height - 2f),
Offset(size.width - 2f, size.height - 2f),
),
PointMode.Points,
Color.White,
6f,
cap = StrokeCap.Butt,
)
}
}
}
}
喜欢的点点赞吧,欢迎交流。