Android中分析Jetpack Compose动画内部的实现原理

前言

Compose的动画Api用起来很简单,效果看起来很神奇,那么它内部到底是如何运转的呢?

使用动画的代码示例:

var isOffset by remember { mutableStateOf(false) }
val offsetAnimation by animateDpAsState(targetValue = if (isOffset) 100.dp else 0.dp)
Button(
   onClick = { isOffset = !isOffset },
   modifier = Modifier.offset(0.dp, offsetAnimation)
) {
   Text(text = "点我进行位移")
}

看到有一个Boolean类型的isOffset状态,控制着offsetAnimation动画,然后动画又控制着Button的offset,最终实现了动画效果

我们主要就看一下animateDpAsState(animate*AsState)做了什么

跟一下animateDpAsState最后会走进animateValueAsState方法中:

方法内部创建了一个Animatable动画类

然后我们跟着上图的箭头看,在targetValue发生变化后,会通过channel来发送targetValue值的变化,然后launch启动一个协程,并在其中调用了animatable的animateTo方法

接着我们就看看Animatable类是如何做动画的:

主要就是内部持有一个AnimationState类型(State)的internalState 变量,然后我们接着上面的代码跟一下animateTo方法:

没什么好说的,包了一下targetValue,接着就调用了runAnimation方法,接着往下跟(截不下分成两张图):

主要逻辑就是endState.animate()
endState就是copy的Animatable中的AnimationState对象internalState,也就是动画的初始值

然后animation就是在animateTo方法中包装了动画目标值的对象

接着跟animate方法:

这个方法主要分为两部分,第一部分就是构建了一个AnimationScope,一个数据结构,用来存放动画需要的一些信息

第二个部分就是真正动画计算和生效的地方,doAnimationFrame

首先会在第一次创建AnimationScope的时候执行一次(或再一下帧执行一次,通过callWithFrameNanos方法)

然后会判断如果动画还未执行完毕,就一直循环(while),一帧一帧执行doAnimationFrame计算动画的值

doAnimationFrame方法代码:

其中通过时间等参数计算当前动画应该设置的值,包括lastFrameTimeNanos和value等属性,然后再最后调用updateState方法去将AnimationScope的值更新到AnimationState中

updatState方法代码:

这个state对象其实也就是animateDpAsState中的Animatable动画类中的AnimationState对象internalState

所以上面其实就是Compose中动画的简化流程

来源：https://juejin.cn/post/7118954918198640654