Compose 转场动画之 Transition

前言

在上两篇文章中，我们了解了 Compose 中动画的各种 animationSpec 的使用和 anim.xxx 的方法参数使用说明，这节开始学习 Transition 的使用

Transition

可对多个属性值进行动画

我们先通过一个例子来看看他是如何使用的, 后面再讲讲具体的源码的一些细节

@Composable
fun TransitionAnim() {
    var big by remember { mutableStateOf(false) }

    val scaleTransition = updateTransition(targetState = big, label = "scaleTransition")

    /**  animatexxx 有非常多的方法 **/
    val size by scaleTransition.animateDp(
        transitionSpec = { tween(durationMillis = 2000) }, label = "size"
    ) { if (it) 200.dp else 100.dp }

    val corner by scaleTransition.animateDp(
        transitionSpec = { tween(durationMillis = 2000) }, label = "corner"
    ) {
        if (it) 100.dp else 0.dp
    }

    /**
     * transitionSpec ->  Segment 分段的意思，可以设置分段的动画
     */
    val color by scaleTransition.animateColor(
        transitionSpec = {
            when {
                /** 初始状态从 false 转换到 true 的目标状态（这里仅仅使用 Boolan 类型，实际上它是一个泛型） **/
                /** 设置 false 到  true  的颜色 tween 渐变 **/
                false isTransitioningTo true -> tween(durationMillis = 3000)
                else -> tween(durationMillis = 3000)
            }
        }, label = "color"
    ) {
        if (it) Color.Red else Color.Green
    }

    Box(modifier = Modifier
        .size(size)
        .clip(RoundedCornerShape(corner))
        .background(color)
        .clickable {
            big = !big
        })
}

这段代码的意思是通过 updateTransition 创建了一个 Transition 动画, 并且设置的初始状态是一个 Boolean 的变量为 false, 通过触发点击事件改变这个 Boolean 类型的 big 状态, 从而改变 size , color, corner 属性, 而他们的改变又是通过 Transition.animateXXX 去改变的, 最终开启转场动画, 最终这个动画的效果是这样的

我们先看看 Transition 是如何通过 updateTransition 创建的，看看源码

fun <T> updateTransition(
    targetState: T,
    label: String? = null
): Transition<T> {
    val transition = remember { Transition(targetState, label = label) }
    transition.animateTo(targetState)
    DisposableEffect(transition) {
        onDispose {
            // Clean up on the way out, to ensure the observers are not stuck in an in-between
            // state.
            transition.onTransitionEnd()
        }
    }
    return transition
}

第一个参数是泛型的初始状态, 意味着可以传递任意类型, Boolean 或者枚举, 又或者是其他的各种状态, 第二个参数是 label 参数, 这个参数可以认为给这个动画起的一个名称, 后面会再介绍他在哪里具体使用场景

后面使用了 remember 包裹并创建了 Transition 对象, 再看看 Transition 内部

class Transition<S> @PublishedApi internal constructor(
    private val transitionState: MutableTransitionState<S>,
    val label: String? = null
) {
    internal constructor(
        initialState: S,
        label: String?
    ) : this(MutableTransitionState(initialState), label)
    
	// 初始状态
    var currentState: S
        get() = transitionState.currentState
        internal set(value) {
            transitionState.currentState = value
    // 目标状态   
    var targetState: S by mutableStateOf(currentState)
        internal set

    /**从初始状态到目标状态的转换
     * [segment] contains the initial state and the target state of the currently on-going
     * transition.
     */
    var segment: Segment<S> by mutableStateOf(SegmentImpl(currentState, currentState))
        private set

    /**
     * Indicates whether there is any animation running in the transition.
     */
    val isRunning: Boolean
        get() = startTimeNanos != AnimationConstants.UnspecifiedTime

Transition 中，它的内部属性维护了一些初始状态和目标状态，和动画是否正在运行等，然后我们传递进来的参数又通过他的构造函数, 又使用 MutableTransitionState 对象进行了包裹一层, 而他的内部, 也维护了一些状态

class MutableTransitionState<S>(initialState: S) {
   // 初始状态
    var currentState: S by mutableStateOf(initialState)
        internal set
	// 目标状态
    var targetState: S by mutableStateOf(initialState)
    
    val isIdle: Boolean get() = (currentState == targetState) && !isRunning
    internal var isRunning: Boolean by mutableStateOf(false)
}

updateTransition 基本介绍完了, 它这里仅仅是瞄准的是状态, 因为我们传递进来的参数都是状态值，但是值又是哪里改变的呢 ？

值的改变其实是在 animatexxx 方法中, 这样的方法有很多, 大概有这些

我们选一个 color 配置的看看 animateColor 动画，源码如下

@Composable
inline fun <S> Transition<S>.animateColor(
    noinline transitionSpec:
    @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<Color> = { spring() },
    label: String = "ColorAnimation",
    targetValueByState: @Composable() (state: S) -> Color
): State<Color> {
    val colorSpace = targetValueByState(targetState).colorSpace
    val typeConverter = remember(colorSpace) {
        Color.VectorConverter(colorSpace)
    }

    return animateValue(typeConverter, transitionSpec, label, targetValueByState)
}

第一个参数 transitionSpec 是配置转场动画的, 默认返回 spring 弹簧动画, 返回的类型是 FiniteAnimationSpec, 关于 FiniteAnimationSpec 我们之前的文章有讲到过，通过它的类的继承结构，它可以使用如下这些 Spec

还有一个需要注意的是, 这个 transitionSpec 属性有一个上下文环境 Transition.Segment , 他可以认为是动画的一个段落，他的内部维护了初始状态和目标状态，我们可以看下它是怎么创建的，在 animateColor 源码中，将 transitionSpec 传入到了 animateValue 方法中

inline fun <S, T, V : AnimationVector> Transition<S>.animateValue(
    typeConverter: TwoWayConverter<T, V>,
    noinline transitionSpec: @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<T> =
        { spring() },
    label: String = "ValueAnimation",
    targetValueByState: @Composable (state: S) -> T
): State<T> {

    val initialValue = targetValueByState(currentState) // 初始状态
    val targetValue = targetValueByState(targetState) // 目标状态
    val animationSpec = transitionSpec(segment) // 创建了 animationSpec 对象

    return createTransitionAnimation(initialValue, targetValue, animationSpec, typeConverter, label)
}

这里可以看到通过 targetValueByState 创建了一个初始状态和目标状态值，而这里对应例子的代码也就是，初始状态是 Color.Red，目标状态是 Color.Green 然后，将这个值都存储在了 segment 变量中，而 segment 传入到 transitionSpec 表达式中做上下文对象，看看 segment 对象是如何存储的，代码如下

var segment: Segment<S> by mutableStateOf(SegmentImpl(currentState, currentState))  

这里一个疑问，它不是把动画分成一部分的段落吗，那它是如何决定那个段落运行的是那段代码呢 ？也就是执行那个动画呢，其实是在 updateTransition 中的 animateTo 中，先看看

updateTransition 中 animateTo 的方法

internal fun animateTo(targetState: S) {
  	if (!isSeeking) {
       updateTarget(targetState)
}

接着再看看 updateTarget 方法

    internal fun updateTarget(targetState: S) {
        if (!isSeeking) {
            if (this.targetState != targetState) {
                // Starting state should be the "next" state when waypoints are impl'ed
                segment = SegmentImpl(this.targetState, targetState) // 设置状态值和目标值
                currentState = this.targetState // 上一次目前状态设置为当前的初始状态， 也就是动画这一刻的状态就是初始状态
                this.targetState = targetState // 设置目标状态
                if (!isRunning) {
                    updateChildrenNeeded = true
                }
                
                _animations.forEach { it.resetAnimation() }
            }
        }
    }

所以这里的整体逻辑就是当我们的 big 状态值发生改变的时候，最终会调用到 updateTransition 方法，最终调用 animateTo 方法，然后内部设置初始值和状态值的改变，也就是 segment 改变，最终回到例子中我们配置的 transitionSpec 是这样的

/** 初始状态从 false 转换到 true 的目标状态（现实场景中，可能是一个枚举常亮） **/
/** 设置 false 到  true  的颜色 tween 渐变 **/
false isTransitioningTo true -> tween(durationMillis = 2000)
else -> tween(durationMillis = 3000)

所以从目标状态 false 到 true 状态转变的时候，使用的 tween(durationMillis = 2000) 动画，而 true 到 false 的情况使用的就是 tween(durationMillis = 3000) 动画

最后看下 isTransitioningTo 方法是什么

  infix fun S.isTransitioningTo(targetState: S): Boolean {
        return this == initialState && targetState == this@Segment.targetState
  }

方法也比较简单，他是一个中缀函数，这段代码也等价于 false == this.initialState && true == this.targetState表示一个状态转换为另外一个状态，是否匹配

第二个参数可以认为是一个名称, 第三个参数 targetValueByState 是根据状态返回目标值, 上面的 color 配置的动画, if (it) Color.Red else Color.Green, 那么就是 true 状态返回红色, false 返回绿色

MutableTransitionState 设置初始状态

代码进入组合阶段后立即开始播放动画

通过上面的分析我们都知道，在 Transition 创建的时候，我们传入的初始状态，最终会被传入到 MutableTransitionState 对象中，而上面例子的我们是直接传入的一个初始状态，但是现在我的需求变化了，我需要手动设置初始状态和目标状态，那么就可以使用 MutableTransitionState 对象，他允许我们在代码进入组合阶段后立即开始播放动画，能够在创建对象的时候，显示的设置初始状态和目标状态，他是这么使用的

var currentState = remember { MutableTransitionState(initialState) } // 设置初始状态
currentState.targetState = targetState 
val transition = updateTransition(currentState)

改造一下上面的例子, 界面在刚进入组合阶段就开启动画

@Preview
@Composable
fun TransitionAnim2() {

    var big = remember {
        MutableTransitionState(true).apply {
            // 设置状态 true 到 false 的转变
            targetState = false
        }
    }

    val scaleTransition = updateTransition(transitionState = big, label = "scaleTransition")

    val size by scaleTransition.animateDp(
        transitionSpec = { tween(durationMillis = 2000) }, label = "size"
    ) {    if (it) 200.dp else 100.dp }

    val corner by scaleTransition.animateDp(
        transitionSpec = { tween(durationMillis = 2000) }, label = "corner"
    ) {        if (it) 100.dp else 0.dp    }

    val color by scaleTransition.animateColor(
        transitionSpec = { tween(2000) }, label = "color"
    ) {        if (it) Color.Red else Color.Green    }

    Box(modifier = Modifier
        .size(size)
        .clip(RoundedCornerShape(corner))
        .background(color)
        .clickable {            big.targetState = !big.targetState        })
}

代码基本一致, 只是手动设置了初始状态和目标状态(红色往绿色的渐变动画), 在刚进入界面的时候就开启动画了, 运行代码效果如下

Transition 动画基本就介绍完成了，仔细观察上面的动画，我们是不是也可以使用 animationxxAsStatus 同样可以做到，也就是需要创建 3 个 asStatus 对象，类似于这样

val size by animateXXAsState()
val corner by animateXXAsState()
val color by animateXXAsState()

这样确实也是可以做到的，就是会比较麻烦，需要改变3 个状态值来做动画效果，而 Transition 不一样，它可以认为将状态统一提升了，视角变得更高了，针对 Transition 的状态来统一对多个属性做动画效果

动画预览

还记得我们上面设置的 label 吗，他就是我们预览的时候，可以看到设置的一个名称，这样预览动画的时候，比较方便，如图，点击 start preview 就可以进入预览模式

进入预览模式后，左下角的操控面板就可以看到我们设置的 label 值，和状态值，过多的就不介绍了，这个面板调试动画还是很方便的

rememberInfiniteTransition

可对多个属性值进行无线循环的动画

这个动画比较简单，直接上代码看看效果

@Composable
fun RepeatAnim() {
    val infiniteTransition = rememberInfiniteTransition(label = "")
    val color by infiniteTransition.animateColor(
        initialValue = Color.Red,
        targetValue = Color.Green,
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ), label = ""
    )
    
    // infiniteTransition.animateDp() ...

    Box(
        Modifier
            .fillMaxSize()
            .background(color)
    )
}

这个代码使用 rememberInfiniteTransition 创建了 infiniteTransition 对象，其中 rememberInfiniteTransition 并没有什么参数可以配置的， 接着调用了 animateColor 方法，他能配置的参数基本都写出来了，第一个参数是初始状态为红色，第二个参数是目标状态是绿色，所以他是一个红色转为绿色的一个动画，第三个参数是 animationSpec ，这个参数返回的是一个 InfiniteRepeatableSpec 对象，目前这个参数只有一个 infiniteRepeatable 的实现，他是一个无限循环动画，他的第一个参数是 animation，返回的对象是 DurationBasedAnimationSpec ，这个是基于时间设置的动画，我在基础篇动画的时候讲过，repeatMode 是重复模式, start, 从起始位置开始重复, Reverse 从目标值开始重复，这个以前也讲过了，所有的配置基本都在这里了

最终它的效果是这样的