來學習Jetpack Compose 在splash頁面加入動畫吧！
目標
這篇目標會是做出一個
簡單的splash 頁面
我們今天最後達成的目標會是這樣：
前言
現在許多應用程式都會設計一個進入畫面，
以便讓用戶清楚地識別當前的應用程式或公司標誌，
確保用戶知道他們正在使用的是哪個應用程式。
在本篇文章中，
我們將重點介紹如何實現一個簡單的跳轉功能，
並配合簡單的水平擴展動畫，
來達到今天的目標。
如果你對Jetpack Compose的基礎還不熟悉，
可以參考這篇文章以加深理解：
我們需要先考慮這個頁面的整體結構。
通常習慣先想像最終畫面的樣子，
因此我透過使用一個Box元件作為不同圖層的概念來區分各個區塊。
這樣我們就能在之後觸發某個外部呼叫所要執行的動作。
同時，
我們也可以預設動畫的進場與退場時間，
以及執行傳入動作前的延遲時間。
這些參數可以根據需求自行調整，
但為了方便理解，我們先將它們寫在函式內部。
根據具體情況，
我希望我的 Logo 在頁面正中央並稍微偏上一點，
所以我加入了 Column 元件，並使用 Modifier 調整相關位置。
你可以參考下方程式碼的#23~#34行，來調整相關位置。
現在我們將進入動畫的關鍵部分，
使用了 Jetpack Compose 的 AnimatedVisibility。
這個類提供了許多內建的方法，
讓我們能夠快速實現一些基本的動畫效果。
在這一部分，
我們先來看一下前面我們定義的一個 val 變數 state。
這是 Jetpack Compose 中經常使用的概念之一，
因為在單獨使用 Composable 寫程式碼時，
它不會自動在 XML 中進行更新。
要透過state告知composable更新
val state = remember {
MutableTransitionState(false).apply {
...
}
}
所以這邊用到 remember 來記住（儲存） MutableTransitionState 物件
這邊重點講一下 MutableTransitionState
它是一種包含了兩種狀態的 可觀察其狀態的項目
其中包含 currentState 與 targetState
根據官方解釋
當可觀察的state狀態改變時
會觸發系統讓compose去重組
所以我們可以利用這個特性
去實時變更我們compose元件的內容
例如我這邊的例子是：
1.先宣告一個staus 初始狀態為 false
2.在使用AnimatedVisibility設定該visibleState為我剛剛宣告的staus
3.回到剛剛宣吿val staus的地方加入apply
其中概念是
利用了kotlin extension 概念apply去執行scope內的code
因apply可以取得父類內的特性
所以設定MutableTransitionState內的targetState變為ture
此舉動會讓MutableTransitionState發生改變 所以使用該staus的會觸發上方說過的特性
讓我們開發時有依據去判斷何時要改變compose
val state = remember {
MutableTransitionState(false).apply {
// Start the animation immediately.
targetState = true
...
}
}
也就是說，
使用上面方法觸發動畫
觸發後同時觸發Handler去執行跳轉的動作：
val state = remember {
MutableTransitionState(false).apply {
// Start the animation immediately.
targetState = true
Handler(Looper.getMainLooper()).postDelayed({
event.invoke()
}, delayMillis)
}
}
接下來，
我們將開始進行動畫的製作。
在這裡，
我們同樣使用了 Jetpack Compose 的庫，
具體來說是使用了 AnimatedVisibility。
在這個函式中，我們使用了以下幾個變數：
1.visibleState：這是控制動畫顯示狀態的變數。
透過前面提到的 remember 和 MutableTransitionState，
我們能夠觸發這個庫的動畫效果。
換句話說，當該狀態改變時，這個函式就會再次執行。
2.enter：這個變數用於定義動畫進場的效果。
3.exit：這個變數用於定義動畫退場的效果。
透過設定這些變數，
我們能夠控制動畫的出現與消失，
從而營造出令人驚艷的視覺效果。
理解上面後，就可以用官方提供的幾種內建動畫套入
進場使用 expandHorizontally
出場使用 fadeOut
也就是說在 enter與exit分別帶入要的動畫如下：
AnimatedVisibility(
visibleState = state,
enter = expandHorizontally(
animationSpec = tween(
durationMillis = startDurationMillis,
easing = LinearEasing
),
),
exit = fadeOut(
animationSpec = tween(
durationMillis = exitDurationMillis,
easing = LinearEasing
),
)
){
...
}
接著，
在 AnimatedVisibilityScope 的函式型別範圍內，
你可以加入你想要顯示的元件，
這樣就能呈現出動畫效果了。