乐趣区

关于android:高效动画实现原理Jetpack-Compose-初探索

jiezi

一、简介

Jetpack Compose 是 Google 推出的用于构建原生界面的新 Android 工具包，它可简化并放慢 Android 上的界面开发。Jetpack Compose 是一个申明式的 UI 框架，随着该框架的推出，标记着 Android 开始全面拥抱申明式 UI 开发。Jetpack Compose 存在很多长处：代码更加简洁直观、利用开发效率显著晋升、Kotlin API 性能直观、预览工具弱小等。

二、开发环境

为了取得更好的开发体验，笔者这里应用的是 Android Studio Canary 版本，这样能够无需配置一些设置和依赖。（下载地址）

关上工程，新建 Empty Compose activity 模版，须要留神的是根目录下的 build.gradle，相干的依赖 com.android.tools.build 和 org.jetbrains.kotlin 版本须要对应，否则可能呈现出错的情景，这里应用的是：

dependencies {
    classpath "com.android.tools.build:gradle:7.0.0-alpha15"
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30"
}

这样就实现了我的项目的新建。

三、Jetpack Compose 动画

Jetpack Compose 提供了一些功能强大且可扩大的 API，可用于在利用界面中轻松实现各种动画成果。下文将会对 Jetpack Compose Animations 的罕用办法进行介绍。

3.1 状态驱动动画:State

Jetpack Compose 动画是通过对状态的监听，即监听状态值的变动，使 UI 能实现自动更新。可组合函数能够应用 remember 或者 mutableStateOf 监听状态值的变动。如果状态值是不变的，remember 函数会在每次重新组合中放弃该值；如果状态是可变的，它会在值发生变化的时候触发重组，mutableStateOf 将失去一个 MutableState 对象，它是一个可察看类型。

这种重组是创立状态驱动动画的要害。利用重组，它们会在可组合组件的状态产生任何变动时被触发。Compose 动画是由 State 驱动的，动画相干的 API 也较容易上手，能比拟容易发明出丑陋的申明式动画。

3.2 可见性动画: AnimatedVisibility

首先看下函数定义:

@ExperimentalAnimationApi
@Composable
fun AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    initiallyVisible: Boolean = visible,
    content: @Composable () -> Unit) {AnimatedVisibilityImpl(visible, modifier, enter, exit, initiallyVisible, content)
}

能够看出默认的动画是淡入放大、淡出膨胀，理论中通过传入不同函数实现各种动效。

随着可见值的变动，AnimatedVisibility 可为其内容的呈现和隐没设置动画。如下代码，能够通过点击 Button，管制图片的呈现和隐没。

@Composable
fun AinmationDemo() {

    //AnimatedVisibility 可见动画
    var visible by remember {mutableStateOf(true) }

    Column(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        Arrangement.Top,
        Alignment.CenterHorizontally
    ) {
        Button(onClick = { visible = !visible}
        ) {Text(text = if (visible) "Hide" else "Show")
        }

        Spacer(Modifier.height(16.dp))

        AnimatedVisibility(
            visible = visible,
            enter = slideInVertically() + fadeIn(),
            exit = slideOutVertically() + fadeOut()
        ) {
            Image(painter = painterResource(id = R.drawable.pikaqiu),
                contentDescription = null,
                Modifier.fillMaxSize())
        }
    }
}

通过监听 visible 的变动，可实现图片的可见性动画，成果如小图所示；

3.3 布局大小动画：AnimateContentSize

先看下函数的定义：

fun Modifier.animateContentSize(animationSpec: FiniteAnimationSpec<IntSize> = spring(),
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null
)

能够为布局大小动画设置动画速度和监听值。

由函数的定义能够看出这个函数实质上就 Modefier 的一个扩大函数。能够通过变量 size 监听状态变动实现布局大小的动画成果，代码如下：

// 放大放大动画 animateContentSize
    var size by remember {mutableStateOf(Size(300F, 300F)) }

    Column(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        Arrangement.Top,
        Alignment.CenterHorizontally
    ) {Spacer(Modifier.height(16.dp))

        Button(
            onClick = {size = if (size.height == 300F) {Size(500F, 500F)
                } else {Size(300F, 300F)
                }
            }
        ) {Text(if (size.height == 300F) "Shrink" else "Expand")
        }
        Spacer(Modifier.height(16.dp))

        Box(
            Modifier
                .animateContentSize()) {
            Image(painter = painterResource(id = R.drawable.pikaqiu),
                contentDescription = null,
                Modifier
                    .animateContentSize()
                    .size(size = size.height.dp)
            )
        }
} // 放大放大动画 animateContentSize    var size by remember {mutableStateOf(Size(300F, 300F)) }​    Column(Modifier            .fillMaxWidth()            .fillMaxHeight(),        Arrangement.Top,        Alignment.CenterHorizontally) {Spacer(Modifier.height(16.dp))​        Button(onClick = {                size = if (size.height == 300F) {Size(500F, 500F)                } else {Size(300F, 300F)                }            }        ) {Text(if (size.height == 300F) "Shrink" else "Expand")        }        Spacer(Modifier.height(16.dp))​        Box(Modifier                .animateContentSize()        ) {Image(                painter = painterResource(id = R.drawable.pikaqiu),                contentDescription = null,                Modifier                    .animateContentSize()                    .size(size = size.height.dp)            )        }}

通过 Button 的点击，监听 size 值的变动，利用 animateContentSize（）实现动画成果，具体动效如下图所示：

3.4 布局切换动画: Crossfade

Crossfade 能够通过监听状态值的变动，应用淡入淡出的动画在两个布局之间增加动画成果，函数本身就是一个 Composable，代码如下：

//Crossfade 淡入淡出动画
    var fadeStatus by remember {mutableStateOf(true) }

    Column(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        Arrangement.Top,
        Alignment.CenterHorizontally
    ) {
        Button(onClick = { fadeStatus = !fadeStatus}
        ) {Text(text = if (fadeStatus) "Fade In" else "Fade Out")
        }

        Spacer(Modifier.height(16.dp))

        Crossfade(targetState = fadeStatus, animationSpec = tween(3000)) { screen ->
            when (screen) {
                true -> Image(painter = painterResource(id = R.drawable.pikaqiu),
                    contentDescription = null,
                    Modifier
                        .animateContentSize()
                        .size(300.dp)
                )
                false -> Image(painter = painterResource(id = R.drawable.pikaqiu2),
                    contentDescription = null,
                    Modifier
                        .animateContentSize()
                        .size(300.dp)
                )
            }
        }

    }

同样通过监听 fadeStatus 的值，实现布局切换的动画，具体的动效如图所示：

3.5 单个值动画：animate*AsState

为单个值增加动画成果。只需提供完结值（或目标值），该 API 就会从以后值开始向指定值播放动画。

Jetpack Compose 提供了很多内置函数，能够为不同类型的数据制作动画，例如：animateColorAsState、animateDpAsState、animateOffsetAsState 等，这里将介绍下 animateFooAsState 的应用，代码如下：

//animate*AsState 单个值增加动画
    var transparent by remember {mutableStateOf(true) }
    val alpha: Float by animateFloatAsState(if (transparent) 1f else 0.5f)

    Column(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        Arrangement.Top,
        Alignment.CenterHorizontally
    ) {
        Button(onClick = { transparent = !transparent}
        ) {Text(if (transparent) "Light" else "Dark")
        }

        Spacer(Modifier.height(16.dp))

        Box {

            Image(painter = painterResource(id = R.drawable.pikaqiu),
                contentDescription = null,
                Modifier
                    .animateContentSize()
                    .graphicsLayer(alpha = alpha)
                    .size(300.dp)
            )
        }
}

动画成果如下图所示：

3.6 组合动画：updateTransition

Transition 可同时追踪一个或多个动画，并在多个状态之间同步这些动画。具体的代码如下：

var imagePosition by remember {mutableStateOf(ImagePosition.TopLeft) }

    Column(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        Arrangement.Top,
        Alignment.CenterHorizontally
    ) {Spacer(Modifier.height(16.dp))

        val transition = updateTransition(targetState = imagePosition, label = "")
        val boxOffset by transition.animateOffset(label = "") { position ->
            when (position) {ImagePosition.TopLeft -> Offset(-60F, 0F)
                ImagePosition.BottomRight -> Offset(60F, 120F)
                ImagePosition.TopRight -> Offset(60F, 0F)
                ImagePosition.BottomLeft -> Offset(-60F, 120F)
            }
        }
        Button(onClick = {imagePosition = ChangePosition(imagePosition)
        }) {Text("Change position")
        }
        Box {

            Image(painter = painterResource(id = R.drawable.pikaqiu),
                contentDescription = null,
                Modifier
                    .offset(boxOffset.x.dp, boxOffset.y.dp)
                    .animateContentSize()
                    .size(300.dp)
            )
        }
}

其中，ImagePosition、ChangePosition 别离为定义的枚举类、自定义函数。

enum class ImagePosition {
    TopRight,
    TopLeft,
    BottomRight,
    BottomLeft
}

fun ChangePosition(position: ImagePosition) =
    when (position) {
        ImagePosition.TopLeft -> ImagePosition.BottomRight
        ImagePosition.BottomRight -> ImagePosition.TopRight
        ImagePosition.TopRight -> ImagePosition.BottomLeft
        ImagePosition.BottomLeft -> ImagePosition.TopLeft
    }

动画的如下图所示：

四、结语

Jetpack Compose 已将动画简化到只需在咱们的可组合函数中创立申明性代码的水平，只需编写心愿 UI 动画的形式，其余部分由 Compose 治理。最初，这也是是 Jetpack Compose 的次要指标：创立一个申明式 UI 工具包来减速利用程序开发并进步代码可读性和逻辑性。

Jetpack Compose 提供的申明式 UI 工具包，能做到应用更少的代码实现更多的性能，且代码的可读性和逻辑性也大大提高了。

作者：vivo 互联网游戏客户端团队 -Ke Jie

退出移动版