来聊聊 Jetpack Compose 动画，一篇搞定（上篇）

enum class HeartState { SMALL, BIG } // 定义红心的两种类型
var action by remember { mutableStateOf(HeartState.SMALL) } // 指定红心状态（也是动画的触发器）
val animationTransition = updateTransition(targetState = action, label = "") // 创建动画类
// 定义不同状态下的尺寸
val size by animationTransition.animateDp(label = "改变大小") { state ->
    if (state == HeartState.SMALL) 40.dp else 60.dp
}
// 定义不同状态下的透明度
val alpha by animationTransition.animateFloat(label = "改变透明度") { state ->
    if (state == HeartState.SMALL) 0.5f else 1f
}
// 绘制红心
Image(
    modifier = Modifier.size(size = size).alpha(alpha = alpha),
    painter = painterResource(id = R.drawable.heart),
    contentDescription = "heart"
)
// 点击触发状态切换
Text(
    text = "切换",
    modifier = Modifier
        .padding(top = 10.dp, bottom = 50.dp)
        .clickable { action = if (action == HeartState.SMALL) HeartState.BIG else HeartState.SMALL }
)
复制代码

var isVisible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = isVisible,
    enter = slideInVertically() + fadeIn(), // 水平方向划入 + 渐变展示
    exit = slideOutHorizontally() + fadeOut() // 垂直方向划出 + 渐变隐藏
) {
    Image(
        modifier = Modifier.size(size = 50.dp),
        painter = painterResource(id = R.drawable.heart),
        contentDescription = "heart"
    )
}
复制代码

@Composable
fun AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    content: @Composable() AnimatedVisibilityScope.() -> Unit
)
复制代码

var isVisible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = isVisible,
    enter = slideInVertically() + fadeIn(),
    exit = slideOutHorizontally() + fadeOut()
) {
  // 此处 transition 是 AnimatedVisibilityScope 中的成员
  val customColor by transition.animateColor(label = "颜色变化") { state ->
    if (state == EnterExitState.Visible) Color.Blue else Color.Red
  }
	Icon(
		modifier = Modifier.size(size = 50.dp),
		painter = painterResource(id = R.drawable.heart),
		tint = customColor,
		contentDescription = "heart"
	)
}
复制代码

@ExperimentalAnimationApi
@Composable
fun <S> AnimatedContent(
    targetState: S,
    modifier: Modifier = Modifier,
    transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = {
        fadeIn(animationSpec = tween(220, delayMillis = 90)) with fadeOut(animationSpec = tween(90))
    },
    contentAlignment: Alignment = Alignment.TopStart,
    content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit
)
复制代码

var count by remember { mutableStateOf(0) } // 初始值为 0
AnimatedContent(
    targetState = count,
    transitionSpec = {
        if (targetState > initialState) {
            // 数字变大时，进入的数字从下往上变深划入，退出的数字从下往上变浅划出
            slideInVertically({ height -> height }) + fadeIn() with slideOutVertically({ height -> -height }) + fadeOut()
        } else {
            // 数字变小时，进入的数字从上往下变深划入，退出的数字从上往下变浅划出
            slideInVertically({ height -> -height }) + fadeIn() with slideOutVertically({ height -> height }) + fadeOut()
        }
    }
) { targetCount ->
    Text(text = "$targetCount")
}
// 启动协程切换数字，达到每 1 秒自动切换的效果
LaunchedEffect(Unit) {
    while (true) {
        if (count == 0) count++ else count--
        delay(1000)
    }
}
复制代码

infix fun ContentTransform.using(sizeTransform: SizeTransform?)
复制代码

@Composable
fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = 0.01f,
    finishedListener: ((Float) -> Unit)? = null
): State<Float>
复制代码

@Composable
fun <T> updateTransition(targetState: T, label: String? = null): Transition<T>
复制代码

@Composable
fun <T, V : AnimationVector> animateValueAsState(
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    // ...
): State<T>

@Composable
inline fun <S, T, V : AnimationVector> Transition<S>.animateValue(
    typeConverter: TwoWayConverter<T, V>,
    // ...
): State<T>
复制代码

// 1.可以看到 animate*AsState 内部执行的都是 animateValueAsState
@Composable
fun animateRectAsState( /* ... */): State<Rect> {
    return animateValueAsState(
        targetValue, Rect.VectorConverter, animationSpec, finishedListener = finishedListener
    )
}
// 2.对于当前方法，传入的 TwoWayConverter 是 Rect.VectorConverter
private val RectToVector: TwoWayConverter<Rect, AnimationVector4D> =
TwoWayConverter(
    convertToVector = { AnimationVector4D(it.left, it.top, it.right, it.bottom) },
    convertFromVector = { Rect(it.v1, it.v2, it.v3, it.v4) }
)
// 3.TwoWayConverter<T, V>的类型接收两个参数，T指的是原来的类型，V指的是需要中转的类型；
// AnimationVector4D 指的是使用持有 4 个浮点值的 Vector 进行中转；
// 整个过程就是 Rect -> AnimationVector4D -> Rect，非常容易理解。
复制代码

// 注意这里传入的是 State 对象，这样才能保证视图能够在重组过程中被持续刷新
private class AnimateTransitionData(size: State<Dp>, alpha: State<Float>) {
    val size by size // kotlin 的语法糖，同名委托表示取值
    val alpha by alpha
}
复制代码

@Composable
private fun updateTransitionData(targetState: HeartState): AnimateTransitionData {
    val transition = updateTransition(targetState = targetState, label = "")
    // 定义不同状态下的尺寸
    val size = transition.animateDp(label = "改变大小") { state ->
        if (state == HeartState.SMALL) 40.dp else 60.dp
    }
    // 定义不同状态下的透明度
    val alpha = transition.animateFloat(label = "改变透明度") { state ->
        if (state == HeartState.SMALL) 0.5f else 1f
    }
// 此处将 transition 对象作为 remember 的入参，表明每当 transitio 更新，都会触发 AnimateTransitionData 的更新和返回
    return remember(transition) { AnimateTransitionData(size, alpha) }
}
复制代码

var action by remember { mutableStateOf(HeartState.SMALL) }
val data = updateTransitionData(action)
// 绘制红心
Image(
    modifier = Modifier
        .size(size = data.size)
        .alpha(alpha = data.alpha),
    painter = painterResource(id = R.drawable.heart),
    contentDescription = "heart"
)
复制代码