Day 21 Compose UI Animation III

今年的疫情蛮严重的，希望大家都过得安好，希望疫情快点过去，能回到一些线下技术聚会的时光～

今天目标：了解 Compose UI 上的 animation 位移可以怎麽实作。

如果今天我们想实作一个图片移动，从左下角移动到右上角，应该怎麽实作呢？思考的方式，是先定义出一个变化的时间，这个时间的数值会从 0 到1，然後让画面每隔一个时间就变化一次，从0的时间到 1的时间，每个时间的画面应该如何呈现，就可以完成动画。

时间数值也可以不用0到1，可以有很多不同的变化，画面变化跟呈现就是数学，将画面想像成x,y轴，时间变化的0到1这个过程中，如何让图画到你想要指定的位置上。

我参考了范例後改写出下面的程序码。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        val animationState =remember{mutableStateOf(false)}
        BoxWithConstraints(
            modifier = Modifier
                .fillMaxSize()
                .background(color = Color.Black)){
            MovingDemo(
                isMovingEnabled = animationState.value,
                maxWidth = maxWidth,
                maxHeight = maxHeight
            )
            LaunchButton(
                animationState = animationState.value,
                onToggleAnimationState ={animationState.value = !animationState.value})}
// 首先还是要先宣告图跟按钮
    }
}

@Composable
fun MovingDemo(
    isMovingEnabled: Boolean,
    maxWidth: Dp,
    maxHeight: Dp
) {
    val modifier: Modifier
    val emojiSize = 100.dp
    if (!isMovingEnabled) { 
        modifier = Modifier.offset(
            y = maxHeight - emojiSize, x = maxWidth
        )
// 如果确定开始执行後就每次改变 x与y的数值
} else {
        val infiniteTransition = rememberInfiniteTransition() 
// 记住动画的变数
        val xPositionState = infiniteTransition.animateFloat(
            initialValue = 0f, // 初始值
            targetValue = 1f,  // 最後目标值
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 2000,
                    easing = LinearOutSlowInEasing
                )
            )
// 每2000 millis seconds 变化一次，变化采 LinearOutSlowInEasing的方式
        )
        modifier = Modifier.offset(
            x = (maxWidth  - emojiSize ) * xPositionState.value,
            y = (maxHeight - emojiSize) - (maxHeight - emojiSize) * xPositionState.value,
        )
// 定义 x 与 y值的变化
    }
    Image(
        modifier = modifier
            .width(emojiSize)
            .height(emojiSize),
        painter = painterResource(id = R.drawable.horse),
        contentDescription = "A horse",
    )
// 如Day 7 一样 宣告一个Image 
}

执行效果如上图。