// 方塊顏色，默認(rèn)為藍(lán)色
var backgroundColor by remember { mutableStateOf(Color.Blue) }
// 動(dòng)畫實(shí)例
val animatable = remember { Animatable(10.dp, Dp.VectorConverter) }
// 獲取協(xié)程作用域
val scope = rememberCoroutineScope()
Box {
    // 動(dòng)畫方塊
    Box(
        Modifier
            // 使用動(dòng)畫值
            .padding(start = animatable.value, top = 30.dp)
            .size(100.dp, 100.dp)
            .background(backgroundColor)
            .clickable { // 點(diǎn)擊事件
                // 啟動(dòng)動(dòng)畫
                scope.launch {
                    animatable.animateTo(200.dp,
                        // 為了方便看到效果，動(dòng)畫時(shí)間設(shè)置為 1000ms                 
                        animationSpec = tween(durationMillis = 1000)
                    )
                }
            }
    )
    // 按鈕，用于開啟新動(dòng)畫
    Button(onClick = {
        // 修改方塊顏色，方便觀察區(qū)分兩個(gè)動(dòng)畫
        backgroundColor = Color.Cyan
        // 啟動(dòng)新動(dòng)畫
        scope.launch {
            animatable.animateTo(50.dp, animationSpec = tween(durationMillis = 1000))
        }
    }, Modifier.padding(top = 170.dp, start = 70.dp)) {
        Text(text = "Next", style = TextStyle(fontSize = 10.sp))
    }
}

var backgroundColor by remember { mutableStateOf(Color.Blue) }
// 動(dòng)畫實(shí)例
val animatable = remember { Animatable(10.dp, Dp.VectorConverter) }
val scope = rememberCoroutineScope()
Box {
    // 動(dòng)畫方塊
    Box(
        Modifier
            // 使用動(dòng)畫值
            .padding(start = animatable.value, top = 30.dp)
            .size(100.dp, 100.dp)
            .background(backgroundColor)
            .clickable { // 點(diǎn)擊事件，開啟動(dòng)畫
                scope.launch {
                    animatable.animateTo(200.dp,
                    	// 為了方便觀察動(dòng)畫效果，動(dòng)畫時(shí)長(zhǎng)設(shè)置為 1000ms
                        animationSpec = tween(durationMillis = 1000)
                    )
                }
            }
    )
    // 停止按鈕
    Button(onClick = {
        // 修改方塊顏色
        backgroundColor = Color.Cyan
        // 停止動(dòng)畫
        scope.launch {
            animatable.stop()
        }
    }, Modifier.padding(top = 170.dp, start = 70.dp)) {
        Text(text = "Stop", style = TextStyle(fontSize = 10.sp))
    }
}

fun updateBounds(lowerBound: T? = this.lowerBound, upperBound: T? = this.upperBound)

// 創(chuàng)建狀態(tài) 通過狀態(tài)驅(qū)動(dòng)動(dòng)畫
var moveToRight by remember { mutableStateOf(false) }
// 動(dòng)畫實(shí)例
val animatable = remember { Animatable(10.dp, Dp.VectorConverter) }
// 設(shè)置動(dòng)畫邊界
animatable.updateBounds(lowerBound = 10.dp, upperBound = 200.dp)
val scope = rememberCoroutineScope()
Box(
    Modifier
        // 使用動(dòng)畫值
        .padding(start = animatable.value, top = 30.dp)
        .size(100.dp, 100.dp)
        .background(Color.Blue)
        .clickable { // 點(diǎn)擊事件
            // 修改狀態(tài)
            moveToRight = !moveToRight
            scope.launch {
                // 執(zhí)行動(dòng)畫
                animatable.animateTo(
                    // 根據(jù)狀態(tài)設(shè)置動(dòng)畫的目標(biāo)值，分別是向右到 400dp 和 向左到 -100dp 位置
                    if (moveToRight) 400.dp else -100.dp,
                    animationSpec = tween(durationMillis = 1000)
                )
            }
        }
)

// 創(chuàng)建狀態(tài) 通過狀態(tài)驅(qū)動(dòng)動(dòng)畫
var moveToRight by remember { mutableStateOf(false) }
// 動(dòng)畫實(shí)例
val animatable = remember { Animatable(Offset(10f, 30f), Offset.VectorConverter) }
// 設(shè)置邊界值，下限：Offset(10f, 30f)  上限：Offset(400f, 200f)
animatable.updateBounds(lowerBound = Offset(10f, 30f), upperBound = Offset(400f, 200f))
val scope = rememberCoroutineScope()
Box {
    Box(
        Modifier
            // 使用動(dòng)畫值
            .padding(start = animatable.value.x.dp, top = animatable.value.y.dp)
            .size(100.dp, 100.dp)
            .background(Color.Blue)
            .clickable {
                // 修改狀態(tài)
                moveToRight = !moveToRight
                scope.launch {
                    animatable.animateTo(
                        // 根據(jù)狀態(tài)設(shè)置動(dòng)畫的目標(biāo)值
                        // 分別為向右和向下的 Offset(400f,400f)
                        // 向上和向左的 Offset(-100f,0f)
                        if (moveToRight) Offset(400f,400f) else Offset(-100f,0f),
                        animationSpec = tween(durationMillis = 1000)
                    )
                }
            }
    )
}

scope.launch {
    try {
        // 異常停止時(shí)動(dòng)畫會(huì)拋出異常，不會(huì)正常返回動(dòng)畫結(jié)果
        val animationResult = animatable.animateTo(200.dp,
            animationSpec = tween(durationMillis = 1000)
        )
        // 動(dòng)畫異常停止時(shí)會(huì)拋出異常，下面的代碼不會(huì)被執(zhí)行
        // do something
    } catch (e: CancellationException) {
        Log.e("ANIMATOIN", "動(dòng)畫異常停止")
    }
}

scope.launch {
    val animationResult = animatable.animateTo(200.dp,
        animationSpec = tween(durationMillis = 1000)
    )
    // 判斷動(dòng)畫是否觸達(dá)邊界停止
    if(animationResult.endReason == AnimationEndReason.BoundReached){
        // do something
    }
}

@Preview
@Composable
fun AnimationBound3() {
    // 動(dòng)畫實(shí)例
    val animatable = remember { Animatable(10.dp, Dp.VectorConverter) }
    // 設(shè)置邊界值
    animatable.updateBounds(upperBound = 200.dp, lowerBound = 10.dp)
    val scope = rememberCoroutineScope()
    val splineBasedDecay = rememberSplineBasedDecay<Dp>()
    Box(
        Modifier
            // 使用動(dòng)畫值
            .padding(start = animatable.value, top = 30.dp)
            .size(100.dp, 100.dp)
            .background(Color.Blue)
            .clickable {
                scope.launch {
                    // 啟動(dòng)動(dòng)畫，設(shè)置初始速度為 3000dp
                    val animationResult = animatable.animateDecay(3000.dp, splineBasedDecay)
                    // 判斷是否為到達(dá)邊界停止
                    if(animationResult.endReason == AnimationEndReason.BoundReached){
                        // 執(zhí)行反向動(dòng)畫，初始速度取動(dòng)畫結(jié)束時(shí)速度的負(fù)數(shù)
                        reverseAnimation(animatable, -animationResult.endState.velocity, splineBasedDecay)
                    }
                }
            }
    )
}
/// 反向執(zhí)行動(dòng)畫
private suspend fun reverseAnimation(
    animatable: Animatable<Dp, AnimationVector1D>,
    initialVelocity: Dp,
    splineBasedDecay: DecayAnimationSpec<Dp>
) {
    val result =  animatable.animateDecay(initialVelocity, splineBasedDecay)
    // 判斷是邊界停止時(shí)遞歸執(zhí)行反向動(dòng)畫直到動(dòng)畫非邊界停止
    if(result.endReason == AnimationEndReason.BoundReached){
        reverseAnimation(animatable, -result.endState.velocity, splineBasedDecay)
    }
}