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動畫等，期待官方的解決方案。