基石

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

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 中的動畫，所以 Compose 基礎(chǔ)如果不知道的話就不太好玩了，大家可以去看我的書或者直接去看官方文檔，都可以把基礎(chǔ)搞定。

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

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

什么是動畫

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

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

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

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

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

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

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

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

瞅下 Compose 的動畫

為啥說瞅下 Compose 的動畫呢，因?yàn)閯赢嫃膩矶疾皇且粋€簡單的東西，簡單使用都沒問題，但要真的想要玩的好、玩的花并不容易。今天先帶大家來看看 Compose 中一些開箱即用的動畫 api，動畫效果很不錯呦！哈哈哈！

可見性動畫——AnimatedVisibility

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

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

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

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

如果這個時候吃驚就不合適了，這只是 Compose 中動畫的基操，Compose 還為我們提供了很多常用的動畫效果供我們使用，接著來看實(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)接收兩個參數(shù)，用來設(shè)置進(jìn)入和退出的動畫，然后添加了一個狀態(tài)值（用于表示是否展示），之后添加了一個 Card ，其實(shí)沒什么用，只是覺得圓角的好看??，Card 中包裹著一個橫向布局，橫向布局中一個圖片和一段文字，文字使用 AnimatedVisibility 包裹著來實(shí)現(xiàn)內(nèi)容的動畫。

其實(shí)工作中經(jīng)常有這么一種情況，動畫并不是點(diǎn)擊來觸發(fā)的，而是當(dāng)進(jìn)入頁面的時候就會觸發(fā)，這個時候該怎么實(shí)現(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(
                /// 設(shè)置visibleState
                visibleState = state,
                enter = enter,
                exit = exit
            ) {
        .....
}

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

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

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

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

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

屬性動畫——animate*AsState

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

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

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

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

@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 的大小，來運(yùn)行看下動畫效果吧！

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

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

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

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

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

val expend = remember { mutableStateOf(false) }
Column(modifier = Modifier.padding(10.dp)) {
    Text(
        text = "朋友圈一般指的是騰訊微信上的一個社交功能，于微信4.0版本2012年4月19日更新時上線“+
               "用戶可以通過朋友圈發(fā)表文字和圖片，同時可通過其他軟件將文章或者音樂分享到朋友圈。"+
                "用戶可以對好友新發(fā)的照片進(jìn)行“評論”或“贊”，其他用戶只能看相同好友的評論或贊。",
        modifier = Modifier.animateContentSize(), /// 這塊調(diào)用了內(nèi)容大小動畫
        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)容添加了大小動畫，然后用一個 Text 的點(diǎn)擊事件來控制內(nèi)容的展示，再來看下實(shí)際效果！

效果還是可以的，哈哈哈

重復(fù)動畫——rememberInfiniteTransition

重復(fù)動畫在日常開發(fā)中使用的頻率也非常高！比如加載動畫，在未加載成功之前會一直重復(fù)播放，或者空頁面的動畫等等，來看下簡單實(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 一樣保存一個或多個子動畫，但是，這些動畫一進(jìn)入組合階段就開始運(yùn)行，除非被移除，否則不會停止，可以使用 animateColor、animatedFloat 或 animatedValue 添加子動畫。

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

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

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

結(jié)尾

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

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

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

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

最新評論