今日目標

相信今天很多人都收到親友的中秋節賀卡，那我們今天就用 Compose UI 做一個中秋節賀卡好了.

這個賀卡背景是小弟今晚拍的照片，在顯示 "2022.9.10" "祝 Android 中秋節快樂"：

卡片上面有一隻小兔子，點一下這隻小兔子，小兔子就會放大，再點一下放大的小兔子又會變小，小變大，大變小，都會有一個簡單的過場動畫來呈現。

首先我們建立一個新專案 Example Day4:
改一下 Greeting 的 function:我們使用 Column 來做最上層的排版，裡面為了顯示一張照片，文字是在照片的上方，所以需要用 Card 來讓 Text 可以疊在 Image 上，所以排版的基本架構如下：

Column {
    Card {
        Image（）// 月亮照片
        Column {
            Text() // 2022.9.10
            Text() // 祝 $name 中秋節快樂~
            Image() // 兔子的圖片
        }
    }
}

接下來要處理動畫的部分：
我們需要使用一個變數 isNeedExpansion 來決定要把兔子變成大兔子還是小兔子。 大兔子是 350.dp 小兔子是 100.dp, 這個 animation 的 state 變數是 animatedSizeDp。

    val isNeedExpansion = rememberSaveable { mutableStateOf(false) }
    val animatedSizeDp: Dp by animateDpAsState(targetValue = if (isNeedExpansion.value) 350.dp else 100.dp)

因為要讓兔子的圖片是可以被 touch 的，也就是要 clickable，不像 Button 直接又 onClick 參數可以直接給予 click 的動作，Image 是需要從 modifier 來做，其中是實作 clickable, 程式碼如下:

modifier = Modifier
                        .size(animatedSizeDp)
                        .clip(CircleShape)
                        .border(5.dp, Color.Gray, CircleShape)
                        .clickable(
                            enabled = true,
                            onClickLabel = "Clickable image",
                            onClick = {
                                isNeedExpansion.value = !isNeedExpansion.value
                            }
                        )
                )

就這麼簡單，兔子就可以被放大了。

接下來，這幾天我想要了解的是 Compose UI 的 Life Cycle 以及更複雜元件的使用，應該會非常好玩。

敬祝大家中秋佳節烤肉愉快！