Compose 动画 简单例子 以及Button简单扩展

package com.gy.composestudy.view

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.ButtonDefaults.buttonColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.gy.composestudy.R

@Composable
fun RoundCornerButton(
    text : String,
    modifier: Modifier = Modifier,
    background : Color = Color.Green,
    onClick : ()->Unit = {},
    extraContent : @Composable ()->Unit
) {
    Button(onClick = onClick, shape = CircleShape, modifier=modifier, colors = buttonColors(contentColor = background), contentPadding = PaddingValues(horizontal = 36.dp,vertical = 12.dp)) {
        Text(text = text, color = Color.White)
        extraContent()
    }
}

@ExperimentalAnimationApi
@Composable
fun SelectableChip(
    initialSelect : Boolean = false,
    text: String = "",
    onClick: () -> Unit
) {
    var selected by remember {
        mutableStateOf(initialSelect)
    }
    val background by animateColorAsState(targetValue = if(selected) MaterialTheme.colors.secondary else MaterialTheme.colors.surface)
    val textColor by animateColorAsState(targetValue = if(selected) MaterialTheme.colors.onSecondary else MaterialTheme.colors.onSurface.copy(0.5f))

    //val border = if (selected) BorderStroke(0.dp, Color.Transparent) else BorderStroke(1.dp, textColor)
    Button(
        onClick = {
            onClick()
            selected = !selected
        },
        shape = CircleShape,
        modifier = Modifier.selectable(selected, true, null, {}),
        colors = buttonColors(contentColor = textColor, backgroundColor = background),
        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
    ) {
        Text(text, color = textColor, fontSize = 12.sp)
    }
}

@Composable
fun ExchangeButton(
    onClick: () -> Unit = {}
) {
    var clickOnce by remember {
        mutableStateOf(false)
    }
    val rotateValue by animateFloatAsState(targetValue = if(clickOnce) 0f else 180f)
    IconButton(
        onClick = {
            clickOnce = !clickOnce
            onClick()
        },
        Modifier
            .background(
                Color.Transparent,
                CircleShape
            ).graphicsLayer {
                rotationZ = rotateValue
            }
    ) {
        Icon(
            painterResource(
                id = R.drawable.ic_launcher_background),
            contentDescription = null,
            tint = MaterialTheme.colors.primary,
            modifier = Modifier.size(24.dp)
        )
    }
}

@Composable
fun ExpandMoreButton(
    modifier: Modifier = Modifier,
    expand: Boolean,
    onClick: (Boolean) -> Unit
) {
    val rotationValue by animateFloatAsState(
        targetValue = if (expand) -180f else 0f,
        animationSpec = tween(700)
    )
    IconButton(onClick = {
        onClick(!expand)
    }, modifier = modifier) {
        Icon(
            Icons.Default.ArrowDropDown,
            contentDescription = null,
            modifier = Modifier.graphicsLayer {
                rotationX = rotationValue
            }
        )
    }
}

原文地址：juejin.cn/post/718693…