基石

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

Kotlin

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

Compose 基礎(chǔ)

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

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

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

什么是動(dòng)畫

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

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

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

在之前的安卓中一般有以下三種動(dòng)畫：

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

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

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

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

瞅下 Compose 的動(dòng)畫

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

可見性動(dòng)畫——AnimatedVisibility

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

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

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

對，你沒看錯(cuò)，只有四行代碼，而且還有一行是括號，一行是內(nèi)容，其實(shí)只有兩行關(guān)鍵代碼！

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

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

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

每一行對應(yīng)著一條 Item，下面來看下 VisibleItem 可組合項(xiàng)的代碼吧：

@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 可組合項(xiàng)接收兩個(gè)參數(shù)，用來設(shè)置進(jìn)入和退出的動(dòng)畫，然后添加了一個(gè)狀態(tài)值（用于表示是否展示），之后添加了一個(gè) Card ，其實(shí)沒什么用，只是覺得圓角的好看??，Card 中包裹著一個(gè)橫向布局，橫向布局中一個(gè)圖片和一段文字，文字使用 AnimatedVisibility 包裹著來實(shí)現(xiàn)內(nèi)容的動(dòng)畫。

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

@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(
                /// 設(shè)置visibleState
                visibleState = state,
                enter = enter,
                exit = exit
            ) {
        .....
}

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

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

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

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

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

屬性動(dòng)畫——animate*AsState

說屬性動(dòng)畫前像先問大家一個(gè)問題，什么是屬性動(dòng)畫呢？

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

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

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

@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 ，并又增加了動(dòng)畫時(shí)長便于看的更清楚，然后通過按鈕控制 Box 的大小，來運(yùn)行看下動(dòng)畫效果吧！

Gif圖看著還是有點(diǎn)卡頓，實(shí)際運(yùn)行其實(shí)非常流暢，大家可以在本地編碼試一下，效果真的不錯(cuò)。

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

內(nèi)容大小動(dòng)畫——animateContentSize

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

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

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

可以看到代碼并不多，對內(nèi)容添加了大小動(dòng)畫，然后用一個(gè) Text 的點(diǎn)擊事件來控制內(nèi)容的展示，再來看下實(shí)際效果！

效果還是可以的，哈哈哈

重復(fù)動(dòng)畫——rememberInfiniteTransition

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

@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 一樣保存一個(gè)或多個(gè)子動(dòng)畫，但是，這些動(dòng)畫一進(jìn)入組合階段就開始運(yùn)行，除非被移除，否則不會停止，可以使用 animateColor、animatedFloat 或 animatedValue 添加子動(dòng)畫。

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

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

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

結(jié)尾

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

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

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

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

最新評論