fun animateDpAsState(
    targetValue: Dp,
    animationSpec: AnimationSpec<Dp> = dpDefaultSpring,
    finishedListener: ((Dp) -> Unit)? = null
): State<Dp>

val startPadding = animateDpAsState(10.dp)
Box(Modifier
    .padding(start = startPadding.value, top = 10.dp)
    .size(100.dp, 100.dp)
    .background(Color.Blue)
)

val startPadding = animateDpAsState(10.dp)
Box(Modifier
    .padding(start = startPadding.value, top = 10.dp)
    .size(100.dp, 100.dp)
    .background(Color.Blue)
    // 添加點(diǎn)擊事件
    .clickable { 
        // 修改值 報(bào)錯(cuò)
        startPadding.value = 100.dp
    }
)

interface State<out T> {
    val value: T
}

@Composable
fun DpAnimationBox(){
    // 是否移動(dòng)到右邊
    var moveToRight by remember { mutableStateOf(false) }
    //根據(jù) moveToRight 變量傳入?yún)?shù)，true 代表在右邊則傳入 100.dp，false 在左邊則傳入 10.dp
    val startPadding = animateDpAsState(if (moveToRight) 100.dp else 10.dp)
    Box(Modifier
        .padding(start = startPadding.value, top = 10.dp)
        .size(100.dp, 100.dp)
        .background(Color.Blue)
        .clickable {
            // 改變 moveToRight 狀態(tài)，這里直接取反
            moveToRight = !moveToRight
        }
    )
}

enum class CustomState{
    STATE1,
    STATE2,
    STATE3,
}
var customState by remember { mutableStateOf(CustomState.STATE1) }
val paddingValue = when(customState){
    CustomState.STATE1 -> 0.dp
    CustomState.STATE2 -> 100.dp
    CustomState.STATE3 -> 200.dp
}
val startPadding = animateDpAsState(paddingValue)

@Composable
fun DpAnimationBox(){
    // 動(dòng)畫目標(biāo)值
    var startPaddingValue by remember { mutableStateOf(10.dp) }
    // 蔣其設(shè)置給 animateDpAsState
    val startPadding = animateDpAsState(startPaddingValue)
    Box(Modifier
        .padding(start = startPadding.value, top = 10.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            // 改變動(dòng)畫目標(biāo)值
            if(startPaddingValue == 10.dp){
                startPaddingValue = 100.dp
            }else{
                startPaddingValue = 10.dp
            }
        }
    )
}

(Dp) -> Unit

val startPadding = animateDpAsState(if (moveToRight) 100.dp else 10.dp) {
   //TODO: do something
}

val startPadding = animateDpAsState(if (moveToRight) 100.dp else 10.dp) {
    if(it == 100.dp){
        moveToRight = false
    }
}

val startPadding = animateDpAsState(if (moveToRight) 100.dp else 10.dp) {
    moveToRight = !moveToRight
}

@Composable
fun FloatAnimationBox() {
    var show by remember { mutableStateOf(true) }
    val alpha by animateFloatAsState(if (show) 1f else 0f)
    Box(Modifier
        .padding(10.dp)
        .size(100.dp)
        .alpha(alpha)
        .background(Color.Blue)
        .clickable {
            show = !show
        }
    )
}

@Composable
fun IntAnimationBox() {
    var moveToRight by remember { mutableStateOf(false) }
    val startPadding by animateIntAsState(if (moveToRight) 100 else 10)
    Box(Modifier
        .padding(start = startPadding.dp, top = 10.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            moveToRight = !moveToRight
        }
    )
}

@Composable
fun ColorAnimationBox() {
    var toRed by remember { mutableStateOf(false) }
    val color by animateColorAsState(if (toRed) Color.Red else Color.Blue)
    Box(Modifier
        .padding(10.dp)
        .size(100.dp)
        .background(color)
        .clickable {
            toRed = !toRed
        }
    )
}

@Composable
fun SizeAnimationBox() {
    var changeSize by remember { mutableStateOf(false) }
    // 定義 Size 動(dòng)畫
    val size by animateSizeAsState(if (changeSize) Size(200f, 50f) else Size(100f, 100f))
    Box(Modifier
        .padding(10.dp)
        // 設(shè)置 Size 值
        .size(size.width.dp, size.height.dp)
        .background(Color.Blue)
        .clickable {
            changeSize = !changeSize
        }
    )
}

val size by animateIntSizeAsState(if (changeSize) IntSize(200, 50) else IntSize(100, 100))

@Composable
fun OffsetAnimationBox() {
    var changeOffset by remember { mutableStateOf(false) }
    // 定義 offset 動(dòng)畫
    val offset by animateOffsetAsState(if (changeOffset) Offset(100f, 100f) else Offset(0f, 0f))
    Box(Modifier
        // 設(shè)置 offset 數(shù)值
        .offset(offset.x.dp, offset.y.dp)
        .padding(10.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
            changeOffset = !changeOffset
        }
    )
}

val intOffset by animateIntOffsetAsState(if (changeOffset) IntOffset(100, 100) else IntOffset(0, 0))

Modifier.offset { intOffset } 

@Composable
fun RectAnimationBox() {
    var changeRect by remember { mutableStateOf(false) }
	// 定義 rect
    val rect by animateRectAsState(if (changeRect) Rect(100f, 100f, 310f, 150f) else Rect(10f, 10f, 110f, 110f))
    Box(Modifier
        // 設(shè)置位置偏移
        .offset(rect.left.dp, rect.top.dp)
        // 設(shè)置大小
        .size(rect.width.dp, rect.height.dp)
        .background(Color.Blue)
        .clickable {
            changeRect = !changeRect
        }
    )
}

enum class UploadState {
    Normal,
    Start,
    Uploading,
    Success
}

@Composable
fun UploadAnimation() {
    val originWidth = 180.dp
    val circleSize = 48.dp
    var uploadState by remember { mutableStateOf(UploadState.Normal) }
    var text by remember { mutableStateOf("Upload") }
    val textAlpha by animateFloatAsState(1f)
    val backgroundColor by animateColorAsState(Color.Blue)
    val boxWidth by animateDpAsState(originWidth)
    val progressAlpha by animateFloatAsState(0f)
    val progress by animateIntAsState(0)
    // 界面布局
    Box(
        modifier = Modifier
            .padding(start = 10.dp, top = 10.dp)
            .width(originWidth),
        contentAlignment = Alignment.Center
    ) {
        // 按鈕
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(circleSize / 2))
                .background(backgroundColor)
                .size(boxWidth, circleSize)
                .clickable {
                    // 點(diǎn)擊時(shí)修改狀態(tài)為開始上傳
                    uploadState = UploadState.Start
                },
            contentAlignment = Alignment.Center,
        ) {
            // 進(jìn)度
            Box(
                modifier = Modifier.size(circleSize).clip(ArcShape(progress))
                    .alpha(progressAlpha).background(Color.Blue)
            )
            // 白色蒙版
            Box(
                modifier = Modifier.size(40.dp).clip(RoundedCornerShape(20.dp))
                    .alpha(progressAlpha).background(Color.White)
            )
            // 文字
            Text(text, color = Color.White, modifier = Modifier.alpha(textAlpha))
        }
    }
}

var textAlphaValue = 1f
var backgroundColorValue = Color.Blue
var boxWidthValue = originWidth
var progressAlphaValue = 0f
var progressValue = 0
when (uploadState) {
    // 默認(rèn)狀態(tài)不處理
    UploadState.Normal -> {}
    // 開始上傳
    UploadState.Start -> {
        // 文字透明度變?yōu)?
        textAlphaValue = 0f
        // 按鈕背景顏色變?yōu)榛疑?
        backgroundColorValue = Color.Gray
        // 按鈕寬度變?yōu)閳A的寬度
        boxWidthValue = circleSize
        // 中間進(jìn)度的透明度變?yōu)?1
        progressAlphaValue = 1f
    }
    // 上傳中狀態(tài)
    UploadState.Uploading -> {
        textAlphaValue = 0f
        backgroundColorValue = Color.Gray
        boxWidthValue = circleSize
        progressAlphaValue = 1f
        // 進(jìn)度值變?yōu)?100
        progressValue = 100
    }
    // 上傳完成
    UploadState.Success -> {
        // 文字透明度變?yōu)?1
        textAlphaValue = 1f
        // 顏色變?yōu)榧t色
        backgroundColorValue = Color.Red
        // 按鈕寬度變化默認(rèn)時(shí)的原始寬度
        boxWidthValue = originWidth
        // 進(jìn)度透明度變?yōu)?0f
        progressAlphaValue = 0f
    }
}
val textAlpha by animateFloatAsState(textAlphaValue)
val backgroundColor by animateColorAsState(backgroundColorValue)
val boxWidth by animateDpAsState(boxWidthValue)
val progressAlpha by animateFloatAsState(progressAlphaValue)
val progress by animateIntAsState(progressValue)

    val boxWidth by animateDpAsState(boxWidthValue){
        // 按鈕寬度變化完成監(jiān)聽，當(dāng)狀態(tài)為 Start 則修改為 Uploading
        if(uploadState == UploadState.Start){
            uploadState = UploadState.Uploading
        }
    }
    val progress by animateIntAsState(progressValue){
        // 進(jìn)度完成監(jiān)聽，當(dāng)狀態(tài)為 Uploading 則修改為 Success
        if(uploadState == UploadState.Uploading){
            uploadState = UploadState.Success
            // 文字內(nèi)容修改為 Success
            text = "Success"
        }
    }