使用Compose创造有趣的动画:动态的艺术(2)

560 阅读1分钟

背景

在网上看到一个有意思的动画效果,不过使用css实现的,我现在用compose复刻一下。 网址:uiverse.io/vinodjangid…

gif.gif

1.拆解动画

学习和使用动画最重要的就是拆解,因为动画本身就是物体状态的变化,即从一个状态变成另一个状态, 这个动画首先就是一个图标,然后变成了图标+文字

stateDiagram-v2
Icon --> (Icon+Text)

2.基础组件

compose有一个组件叫 FloatingActionButton,我们就用这个作为基础组件,里面塞上一个Icon和text,不过这个Text默认不显示,代码长这个样:

@Composable
fun Logout() {
    val visible by remember { mutableStateOf(false) }
    FloatingActionButton(
        onClick = {},
        backgroundColor = Color(255, 65, 65),
        modifier = Modifier
    ) {
        Row(
            modifier = Modifier,
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Icon(
                Icons.AutoMirrored.Outlined.ExitToApp,
                contentDescription = null,
                tint = Color.White
            )
            if(visible){
                Text(
                    text = "Logout",
                    color = Color.White,
                    fontSize = 15.sp,
                    fontWeight = FontWeight.Bold,
                    fontFamily = FontFamily.Cursive,
                    modifier = Modifier
                        .padding(horizontal = 5.dp, vertical = 3.dp)
                )
            }
        }
    }
}

3.添加动画

把if替换成 AnimatedVisibility,然后稍微优化一下,给整体的Row设置歌可变的padding,效果其实并不和网站上一样,不过也还可以:

gif.gif

完整代码:

//https://uiverse.io/vinodjangid07/thin-duck-22
@Composable
fun LogoutSample() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(232, 232, 232))
            .border(1.dp, Color.Green),
        contentAlignment = Alignment.Center
    ) {
        Logout()
    }
}


@Composable
fun Logout() {
    val interactionSource = remember { MutableInteractionSource() }
    val hovered by interactionSource.collectIsHoveredAsState()
    val horizontalPadding by animateDpAsState(if (hovered) 18.dp else 12.dp)
    FloatingActionButton(
        onClick = {},
        backgroundColor = Color(255, 65, 65),
        modifier = Modifier
            .hoverable(interactionSource)

    ) {
        Row(
            modifier = Modifier
                .padding(horizontal = horizontalPadding),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Icon(
                Icons.AutoMirrored.Outlined.ExitToApp,
                contentDescription = null,
                tint = Color.White
            )
            AnimatedVisibility(hovered) {
                Text(
                    text = "Logout",
                    color = Color.White,
                    fontSize = 15.sp,
                    fontWeight = FontWeight.Bold,
                    fontFamily = FontFamily.Cursive,
                    modifier = Modifier
                        .padding(horizontal = 5.dp, vertical = 3.dp)
                )
            }
        }
    }
}