基石

想要蓋起高樓的話肯定要打好基石，同樣，想要學好 Compose 動畫也需要一些“基石”，一起來看看吧！

Kotlin

Compose 是使用 Kotlin 來進行編寫的，所以如果到現(xiàn)在還沒學習 Kotlin 的要抓緊了，不是說 Java 不好，只不過官方現(xiàn)在新的庫基本都是 Kotlin 編寫的，雖然大部分都支持 Java ，但總有例外，就比如要說的 Compose 就沒有辦法使用 Java 來進行編寫，也不是官方故意的，實在是因為好多語言特性的關系；當然，不學 Kotlin 肯定也沒問題！但此專欄的內容都使用的是 Kotlin ??。

Compose 基礎

前面一直在說 Compose 中的動畫，所以 Compose 基礎如果不知道的話就不太好玩了，大家可以去看我的書或者直接去看官方文檔，都可以把基礎搞定。

這個和上面 Kotlin 一樣，沒有 Compose 基礎的話看 Compose 的動畫肯定看的云里霧里，雖然代碼看著都不難，但會感覺很怪。

有上面所說的兩個“基石”就足夠了，一定先打好地基再去蓋樓！

什么是動畫

對啊，什么是動畫呢？說到動畫我首先想到的就是動畫片，哈哈哈，其實原理都差不多，最開始的動畫不就是繪制一張張漸變的圖片，然后一秒切換24張圖片么！

來看下百度百科是怎么說的：

一般二維動畫，都是以一秒24幀為標準，以保證畫面播放流暢，但由于現(xiàn)代科技的發(fā)達，動畫幀數(shù)可以不用達到一秒24幀。

在之前的安卓中一般有以下三種動畫：

View Animation： 視圖動畫在古老的安卓版本系統(tǒng)中就已經(jīng)提供了，只能被用來設置 View 的動畫，目前基本沒啥人使用了。

Drawable Animation： 也就是咱們常說的幀動畫，幀動畫其實可以劃分到視圖動畫的類別，專門用來顯示多個 Drawable 的 Resources，就像放幻燈片一樣。

Property Animation： 屬性動畫只對 Android 3.0（API 11） 以上版本的安卓系統(tǒng)才有效，這種動畫可以設置給任何Object，包括那些還沒有渲染到屏幕上的對象。這種動畫是可擴展的，可以讓你自定義任何類型和屬性的動畫，目前使用最多的應該就屬屬性動畫了。

上面就是之前安卓中的動畫分類，由于咱們此專欄主要說 Compose 的動畫，所以對于之前安卓中的動畫就不做過多介紹，還有就是大家應該都會，就不在此班門弄斧了。

瞅下 Compose 的動畫

為啥說瞅下 Compose 的動畫呢，因為動畫從來都不是一個簡單的東西，簡單使用都沒問題，但要真的想要玩的好、玩的花并不容易。今天先帶大家來看看 Compose 中一些開箱即用的動畫 api，動畫效果很不錯呦！哈哈哈！

可見性動畫——AnimatedVisibility

這個動畫是 Compose 提供給我們的一個動畫 api，顧名思義，這個 api 可以為內容的出現(xiàn)和消失添加動畫效果，廢話不多說，先上實現(xiàn)效果！

上圖中的動畫效果如果在原生安卓中實現(xiàn)的話雖然不說很難但也絕對不輕松，但在 Compsoe 中就不一樣了，甚至可以說簡單的過分，來看下實現(xiàn)的關鍵代碼有多少吧：

val visible = remember { mutableStateOf(true) }
AnimatedVisibility(visible = visible.value,) {
    Text(text = "天青色等煙雨，而我在等你，炊煙裊裊升起，隔江千萬里")
}

對，你沒看錯，只有四行代碼，而且還有一行是括號，一行是內容，其實只有兩行關鍵代碼！

如果這個時候吃驚就不合適了，這只是 Compose 中動畫的基操，Compose 還為我們提供了很多常用的動畫效果供我們使用，接著來看實現(xiàn)效果吧！

看著上面的效果是不是感覺挺好，但一共也沒多添加幾行代碼，還是來看下關鍵實現(xiàn)代碼吧！

VisibleItem()
VisibleItem(fadeIn(), fadeOut())
VisibleItem(scaleIn(), scaleOut())
VisibleItem(expandIn(), shrinkOut())
VisibleItem(expandHorizontally(), shrinkHorizontally())
VisibleItem(expandVertically(), shrinkVertically())

每一行對應著一條 Item，下面來看下 VisibleItem 可組合項的代碼吧：

@Composable
private fun VisibleItem(
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
) {
    val visible = remember { mutableStateOf(true) }
    Card(modifier = Modifier.padding(10.dp)) {
        Row{
            Image(
                painter = painterResource(id = R.drawable.ic_head),
                contentDescription = "head",
            )
            AnimatedVisibility(
                visible = visible.value,
                enter = enter,
                exit = exit
            ) {
                Text(text = "天青色等煙雨，而我在等你，炊煙裊裊升起，隔江千萬里")
            }
        }
    }
}

可以看到上面具體代碼也不多，簡單說下吧，VisibleItem 可組合項接收兩個參數(shù)，用來設置進入和退出的動畫，然后添加了一個狀態(tài)值（用于表示是否展示），之后添加了一個 Card ，其實沒什么用，只是覺得圓角的好看??，Card 中包裹著一個橫向布局，橫向布局中一個圖片和一段文字，文字使用 AnimatedVisibility 包裹著來實現(xiàn)內容的動畫。

其實工作中經(jīng)常有這么一種情況，動畫并不是點擊來觸發(fā)的，而是當進入頁面的時候就會觸發(fā)，這個時候該怎么實現(xiàn)呢？Compose 也為我們想到了，只要將 AnimatedVisibility 添加到組合樹中，就可以立即觸發(fā)動畫：

@Composable
private fun VisibleItem(
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
) {
    val visible = remember { mutableStateOf(true) }
    val state = remember {
        MutableTransitionState(false).apply {
            // Start the animation immediately.
            targetState = true
        }
    }
    Card(modifier = Modifier.padding(10.dp)) {
        .....
            AnimatedVisibility(
                /// 設置visibleState
                visibleState = state,
                enter = enter,
                exit = exit
            ) {
        .....
}

像上面這樣寫就可以實現(xiàn)進入頁面的時候就會觸發(fā)動畫，來看看效果吧：

可以看到上圖顯示效果其實并不太好，沒有辦法，Gif圖壓縮完就這樣，其實日常開發(fā)咱們也經(jīng)常遇到這種情況，動畫時間太短，看不出是否是動效工程師想要的效果，這樣吧，給動畫多加點時間吧，然后咱們再看看效果吧！

VisibleItem(
    scaleIn(animationSpec = tween(durationMillis = 1500)),
    scaleOut(animationSpec = tween(durationMillis = 1500))
)
VisibleItem(
    expandIn(animationSpec = tween(durationMillis = 1500)),
    shrinkOut(animationSpec = tween(durationMillis = 1500))
)

簡單寫兩個大家能看明白是修改了動畫持續(xù)時間就行，里面具體的各種參數(shù)和使用方法等等會在之后的文章中進行細聊，一個專欄都是關于 Compose 動畫的，今天只是帶大家瞅一瞅！沒事，肯定都能弄明白，再來看下效果吧！

這回看著就好多了，在實際工作中我也經(jīng)常使用這種方式來進行調試動畫效果，大家也可以試試，當然 Compose 中有更方便的動畫調試，這個咱們之后在細說。

屬性動畫——animate*AsState

說屬性動畫前像先問大家一個問題，什么是屬性動畫呢？

屬性動畫是通過不斷地修改值來實現(xiàn)的，而初始值和結束值之間的過渡動畫就需要來計算了，之前我們在原生安卓中會使用到 ValueAnimator 、 ObjectAnimator 等 api 來實現(xiàn)，但寫過或者了解過 Compose 的都知道 Compose 是聲明式的，同安卓現(xiàn)有的構建 UI 的模型完全不同，Compose 中的動畫是重寫的一套，至于 Compose 為什么不直接移植屬性動畫到 Compose 這個問題，我記得之前扔物線專門出過一個視頻來說這個，感興趣的可以去搜一下，總結下來就是之前安卓中的屬性動畫都是基于 View 的，而 Comppose 中我們拿不到可操作的 View ，所以移植屬性動畫也就無從談起了。

在 Compose 中為我們提供了一整套 api 來實現(xiàn)屬性動畫，就是本小節(jié)的標題：animate*AsState ，具體有哪些呢？來看下吧！

官方為我們提供了上圖這十種方法，我們可以根據(jù)實際項目中的需求進行挑選使用，這塊咱們隨便挑選一個使用看下吧。

@Composable
fun AnimateAsStateTest() {
    var isSmall by remember { mutableStateOf(true) }
    val size: Dp by animateDpAsState(
        targetValue = if (isSmall) 40.dp else 100.dp,
        animationSpec = tween(durationMillis = 1500))
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(onClick = { isSmall = !isSmall }) {
            Text("修改Dp值")
        }
        Box(modifier = Modifier.size(size).background(Red))
    }
}

上面代碼中使用了 animateDpAsState ，并又增加了動畫時長便于看的更清楚，然后通過按鈕控制 Box 的大小，來運行看下動畫效果吧！

Gif圖看著還是有點卡頓，實際運行其實非常流暢，大家可以在本地編碼試一下，效果真的不錯。

別的一些就不在這里一一進行展示了，大家可以在本地試試。

內容大小動畫——animateContentSize

這個動畫其實在實際工作中使用的挺頻繁，比如說一些動態(tài)內容過多顯示不全的情況，就會有點擊“全文”顯示完整內容，當閱讀完畢后又會點擊“收起”來收起內容。

之前如果想實現(xiàn)這個功能就需要花點心思了，但是現(xiàn)在使用 Compose 來實現(xiàn)的話就很簡單了！先來看下實現(xiàn)代碼：

val expend = remember { mutableStateOf(false) }
Column(modifier = Modifier.padding(10.dp)) {
    Text(
        text = "朋友圈一般指的是騰訊微信上的一個社交功能，于微信4.0版本2012年4月19日更新時上線“+
               "用戶可以通過朋友圈發(fā)表文字和圖片，同時可通過其他軟件將文章或者音樂分享到朋友圈。"+
                "用戶可以對好友新發(fā)的照片進行“評論”或“贊”，其他用戶只能看相同好友的評論或贊。",
        modifier = Modifier.animateContentSize(), /// 這塊調用了內容大小動畫
        maxLines = if (expend.value) Int.MAX_VALUE else 2  /// 這塊控制內容顯示多少
    )
    Text(if (expend.value) "收起" else "全文", color = Color.Blue, modifier = Modifier.clickable {
        expend.value = !expend.value
    })
}

可以看到代碼并不多，對內容添加了大小動畫，然后用一個 Text 的點擊事件來控制內容的展示，再來看下實際效果！

效果還是可以的，哈哈哈

重復動畫——rememberInfiniteTransition

重復動畫在日常開發(fā)中使用的頻率也非常高！比如加載動畫，在未加載成功之前會一直重復播放，或者空頁面的動畫等等，來看下簡單實用吧！

@Composable
fun InfiniteTransition() {
    val infiniteTransition = rememberInfiniteTransition()
    val size by infiniteTransition.animateValue(
        initialValue = 100.dp,
        targetValue = 200.dp,
        typeConverter = TwoWayConverter({ AnimationVector1D(it.value) }, { it.value.dp }),
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )
    Box(
        Modifier.size(size).padding(20.dp).background(Color.Red)
    )
}

InfiniteTransition 可以像 Transition 一樣保存一個或多個子動畫，但是，這些動畫一進入組合階段就開始運行，除非被移除，否則不會停止，可以使用 animateColor、animatedFloat 或 animatedValue 添加子動畫。

上面代碼中使用了 animateValue ，來無限重復修改 Box 的大小，來看下實際效果吧！

大家可以觀察下運行的效果，發(fā)現(xiàn)點什么問題了嗎？Box 由小到大后執(zhí)行完一次動畫后并沒雨直接變小再緩慢變大，而是緩慢變大然后緩慢變小再緩慢變大這樣重復，這是因為設置了 repeatMode 為 Reverse ， repeatMode 還可以設置為 Restart ，修改再看下運行效果！

是不是效果完全不同，哈哈哈！

結尾

本篇文章簡單帶大家瞅了一眼 Compose 中的開箱即用的動畫，通過簡單的一瞅大家可以感受到在 Compsoe 中使用動畫的簡單便捷，這些都是 Compose 為我們封裝好的一些 api，當然咱們也可以進行自定義。

其實今天說的只是 Compose 動畫的冰山一角，動畫還有非常多可玩的東西，在之后的文章中會詳細道來。

本文中所有代碼都在 Github 中，有需要可以去看：github.com/zhujiang521…

以上就是Compose開發(fā)之動畫藝術探索及實現(xiàn)示例的詳細內容，更多關于Compose開發(fā)動畫藝術的資料請關注腳本之家其它相關文章！

最新評論