使用Compose创造有趣的动画:动态的艺术（5）

背景

好久没有写文章了，最近又看到了几个效果很不错，现在分享一下。

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

}

喜欢的点点赞吧，欢迎交流。