Jetpack Compose - AnimatedVisibility
技術標籤:Jetpack-ComposeJetpackComposeAnimatedVisibleVisibilityCompose動畫
Jetpack Compose - AnimatedVisibility
Compose系列文章,請點原文閱讀。原文,是時候學習Compose了!
這篇文章之後就是重點學習下動畫相關的內容了,Compose的動畫和xml的各種動畫等有很大的不同了,不要拘束於之前的想法。
目前動畫還在實驗階段,所以我們淺入淺出,不做過多的研究。
0、介紹
首先官方給了我們一個開箱即用的動畫函式 AnimatedVisibility
隨著可見值的變化,AnimatedVisibility可為其內容的出現和消失設定動畫。
可以在enter和exit中為內容定義不同的EnterTransitions和ExitTransitions。 EnterTransition和ExitTransition共有3種類型:淡入淡出,展開/收縮和滑動。
1、屬性一覽
【目前基於alpha08版本】請看該函式:
@Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandIn(), exit: ExitTransition = shrinkOut() + fadeOut(), initiallyVisible: Boolean = visible, content: () -> Unit ): Unit
屬性引數含義:
引數 | 含義 |
---|---|
modifier: Modifier = Modifier | 應用於佈局的修飾符 |
visible: Boolean | 定義內容項是否可見 |
enter: EnterTransition = fadeIn() + expandIn() | 入場動畫,預設逐漸淡入 |
exit: ExitTransition = shrinkOut() + fadeOut() | 出場動畫,預設逐漸淡出 |
initiallyVisible: Boolean = visible | 控制是否對入場動畫進行處理,預設情況下不處理(即不對入場動畫做處理,預設是不可見的) |
content: () -> Unit | 子級內容區域,也就是你做動畫的控制元件或佈局 |
根據上述屬性,我們可以瞭解,官方幫我們定義了入場和出場的基本動畫,來看下預設的動畫一共有多少,在androidx.compose.animation.EnterExitTransition.kt檔案中:
- fadeIn
- fadeOut
- slideIn
- slideOut
- expandIn
- shrinkOut
- expandHorizontally
- expandVertically
- shrinkHorizontally
- shrinkVertically
- slideInHorizontally
- slideInVertically
- slideOutHorizontally
- slideOutVertically
基本就這些了,就是上文提到的淡入淡出,展開/收縮和滑動這麼幾種,只不過官方提供了各個方向上的函式,關於函式的具體功能請檢視原始碼,比如說slideInHorizontally,它預設從左側劃入,並且預設的偏移量是你內容的寬度,請看下文的第二個示例。
2、使用示例
我們直接使用函式來實現下預設的動畫效果,程式碼如下:
@ExperimentalAnimationApi
@Composable
fun AnimatedVisibilityDemo() {
val visible = remember { mutableStateOf(false) }
Column(modifier = Modifier.padding(16.dp)) {
Text(
text =
if (visible.value) {
"出場動畫"
} else {
"入場動畫"
},
modifier = Modifier
.clickable(onClick = {
visible.value = !visible.value
})
)
AnimatedVisibility(
visible = visible.value,
) {
Text(
text = "Compose is coming!",
fontSize = 32.sp
)
}
}
}
首先注意下實現性質的註解,因為我們需要控制動畫的入場和出場,所以我們需要一個狀態值visible,然後用文字的點選事件控制動畫的入場和出場,效果如下所示:
OK,是不是超級簡單,那我想改為從左到右逐漸淡入入場呢,直接看AnimatedVisibility函式,在enter引數中我們指定了兩個動畫效果【水平滑入 + 淡入】,使用 “+” 號就可以組合多個動畫效果。然後在exit函式中我們使用了【水平滑出+ 淡出】的效果,程式碼如下:
AnimatedVisibility(
visible = visible.value,
enter = slideInHorizontally() + fadeIn(),
exit = slideOutHorizontally() + fadeOut()
) {
Text(
text = "Compose is coming!",
fontSize = 32.sp
)
}
效果如下:
3、版本更新
- 暫無
4、未解決問題
目前我們只是實現了最基本的動畫效果,暫時還沒找到如何控制動畫的速率,像原來動畫中的估值器和插值器。實際使用中,還有一些是lottie動畫svg動畫等,期待官方的解決方案。