Compose 动画 (七) : 高可定制性的动画 Animatable

1. Animatable和animateDpAsState的区别是什么

Animatable是Android Compose动画的底层API，如果我们查看源码，可以发现animateDpAsState内部是调用的animateValueAsState，而animateValueAsState内部调用的是Animatable

animateDpAsState比Animatable更便捷易用，但屏蔽了部分功能，animateDpAsState抛弃了设置初始值的功能。
animateDpAsState是对于动画具体场景化的一种实现，它针对状态切换这一种动画的场景，设置了专门的扩展，而状态切换是不需要初始值的。

如果想要更高的可定制性(比如设置初始值)，那么就使用Animatable

2. animateDpAsState实现动画

首先，我们使用animateDpAsState来实现一个简单的动画

var big by remember {mutableStateOf(false)
}
val anim = animateDpAsState(if (big) 100.dp else 50.dp)
Box(modifier = Modifier.size(anim.value).background(Color.Blue).clickable { big = !big })

3. 使用Animatable实现上述动画

var big by remember {mutableStateOf(false)
}
val size = remember(big) {if (big) 100.dp else 50.dp
}
val anim1 = remember { Animatable(size, Dp.VectorConverter) }
LaunchedEffect(key1 = big, block = {anim1.animateTo(size)
})
Box(modifier = Modifier.size(anim1.value).background(Color.Blue).clickable { big = !big })

可以发现效果是一样的

这里需要注意的点有

• Dp.VectorConverter : 是TwoWayConverter<T, V> 类型，用来进行数值转换
• LaunchedEffect : 是Compose中的协程，animateTo是一个挂起函数，需要在协程中使用

接下来我们来逐个讲解

3.1 TwoWayConverter

Animatable中默认的TwoWayConverter是Float.VectorConverter

fun Animatable(initialValue: Float,visibilityThreshold: Float = Spring.DefaultDisplacementThreshold
) = Animatable(initialValue,Float.VectorConverter,visibilityThreshold
)

可以看到Float.VectorConverter是TwoWayConverter<Float, AnimationVector1D>类型，说明是直接转换成Float的

val Float.Companion.VectorConverter: TwoWayConverter<Float, AnimationVector1D>get() = FloatToVectorprivate val FloatToVector: TwoWayConverter<Float, AnimationVector1D> =TwoWayConverter({ AnimationVector1D(it) }, { it.value })

3.2 Animatable 支持 多种转换

Animatable不仅支持Float，还支持多种转换

//Float (默认不传就是Float类型)
val animatableFloat1 = remember { Animatable(100F) }
val animatableFloat2 = remember { Animatable(100F,Float.VectorConverter) }
//DP
val animatableDp = remember{ Animatable(100.dp,Dp.VectorConverter) }
//Int
val animatableInt = remember { Animatable(100, Int.VectorConverter) }
//Rect
val animatableRect =remember { Animatable(Rect(100F, 100F, 100F, 100F), Rect.VectorConverter) }
//Offset
val animatableOffset = remember {Animatable(Offset(100F, 100F), Offset.VectorConverter)
}
//IntOffset
val animatableIntOffset = remember {Animatable(IntOffset(100, 100), IntOffset.VectorConverter)
}
//Size
val animatableSize = remember {Animatable(Size(100F, 100F), Size.VectorConverter)
}
//IntSize
val animatableIntSize = remember {Animatable(IntSize(100, 100), IntSize.VectorConverter)
}val blackColor = Color(0xFF000000)
val converter = remember(blackColor.colorSpace) {(Color.VectorConverter)(blackColor.colorSpace)
}
//Color
val animatableColor = remember {Animatable(blackColor, converter)
}

3.3 1D、2D、3D和4D的区别

val animatableDp = remember{ Animatable(100.dp,Dp.VectorConverter) }

我们以Dp.VectorConverter为例，可以发现AnimationVector1D后缀带有1D字样，这是啥意思呢?

val Dp.Companion.VectorConverter: TwoWayConverter<Dp, AnimationVector1D>get() = DpToVector

D代表的是维度，即dimension的意思。1D、2D、3D、4D分别代表着一维、二维、三维、四维

val animatableOffset = remember {Animatable(Offset(100F, 100F), Offset.VectorConverter)
}

比如这个Offset就是二维的

val Offset.Companion.VectorConverter: TwoWayConverter<Offset, AnimationVector2D>get() = OffsetToVector

4. Compose中的协程

Animatable中的animateTo是一个挂起函数，需要在协程中使用。

4.1 之前协程的写法

lifecycleScope.launch {//TODO
}

4.2 LaunchedEffect

但是在Compose里面，不能这么写，因为这种用法，没有针对Compose做优化，在Compose重组过程中，会重复进行调用。

所以Compose提供了一个专门在Compose中启动协程的API : LaunchedEffect

LaunchedEffect(key1 = 123, block = {//代码块anim1.animateTo(100.dp)
})

key不变的话可以这么写 : LaunchedEffect(Unit, block = {})

这里，只要key没有发生变化，那么block代码块就不会再次执行。这里也可以有多个key

LaunchedEffect(key1 = 123,key2=456,key3=789, block = {})

如果有让LaunchedEffect多次执行的场景，那么key1参数就需要可以变化
到这里，我们也就能看懂 3. 使用Animatable实现上述动画 中的代码了

var big by remember {mutableStateOf(false)
}
val size = remember(big) {if (big) 100.dp else 50.dp
}
val anim1 = remember { Animatable(size, Dp.VectorConverter) }
LaunchedEffect(key1 = big, block = {anim1.animateTo(size)
})
Box(modifier = Modifier.size(anim1.value).background(Color.Blue).clickable { big = !big })

5. 使用Animatable进行流程定制

Animatable对于动画是高度可定制化的，我们可以通过Animatable来进行动画流程的定制

var big by remember {mutableStateOf(false)}val size = remember(big) {if (big) 100.dp else 50.dp}val anim1 = remember { Animatable(size, Dp.VectorConverter) }LaunchedEffect(key1 = big, block = {//流程定制anim1.animateTo(10.dp)anim1.animateTo(200.dp)anim1.animateTo(size)})Box(modifier = Modifier.size(anim1.value).background(Color.Blue).clickable { big = !big })

比如这里会先动画执行到10.dp，然后再执行到200.dp，最后再执行目标的size
效果如下所示

6. snapTo 瞬间完成动画

snapTo会瞬间完成动画，就和没有动画的效果进行变化是一样的。
那这个方法有啥用呢 ?
可以在开始动画前先瞬间设置好初始动画状态，从而达到设置动画初始值的效果。

var big by remember {mutableStateOf(false)
}
val size = remember(big) {if (big) 100.dp else 50.dp
}
val anim1 = remember { Animatable(size, Dp.VectorConverter) }
LaunchedEffect(key1 = big, block = {//代码块anim1.snapTo(size) //瞬间完成 ---> 设置初始值
})Box(modifier = Modifier.size(anim1.value).background(Color.Blue).clickable { big = !big })

效果如下所示

7. animateDecay 惯性衰减动画

animateDecay是惯性衰减动画，比如惯性滑动操作，可以实现和Android自带的惯性滑动一致的效果。
那和animateTo有啥区别呢 ?
最大的区别在于 animateTo 是需要设置目标值的，也就是动画结束的那一刻 某个view属性的值 必须明确指定，
而惯性衰减动画 animateDecay 则不需要指定。

• animateDecay： 从初始速度慢慢停下来，例如松手之后的惯性滑动
• animateTo： 指定结束的属性值

val anim = remember {Animatable(0.dp, Dp.VectorConverter)
}
val decay = remember {exponentialDecay<Dp>()
}
LaunchedEffect(key1 = Unit, block = {delay(1000L)anim.animateDecay(2000.dp, decay) {//动画监听，可以获取动画当前的值 this.value}
})
Box(modifier = Modifier.padding(0.dp, anim.value, 0.dp, 0.dp).size(50.dp).background(Color.Blue)
)

效果如下所示

7.1 两种decay的区别

exponentialDecay和rememberSplineBasedDecay都可以实现惯性衰减动画，但它们两个有什么区别呢 ?

• splineBasedDecay : 一般情况下只有在使用像素的情况下，会使用这个，它不会做针对像素做修正的，多个设备滑动效果会不一致
• exponentialDecay :其他情况下一般都是用这个，不会根据像素密度变化而变化，比如DP，颜色，角度之类的

7.2 为什么rememberSplineBasedDecay自带remember

我们可以发现，rememberSplineBasedDecay是自带remember的，但是exponentialDecay却没有自带remember，为什么会这么设计呢 ? 我们来分别看一下rememberSplineBasedDecay的源码

rememberSplineBasedDecay

@Composable
actual fun <T> rememberSplineBasedDecay(): DecayAnimationSpec<T> {val density = LocalDensity.currentreturn remember(density.density) {SplineBasedFloatDecayAnimationSpec(density).generateDecayAnimationSpec()}
}

可以看到remember中传入了density这个参数，说明rememberSplineBasedDecay会随着density像素密度的改变而改变。
而 exponentialDecay 则因为不会响应系统的变化，所以不需要在remember中传入density，就由使用者自己来包装remember就好了。

7.3 animateDecay中的block监听

suspend fun animateDecay(initialVelocity: T,animationSpec: DecayAnimationSpec<T>,block: (Animatable<T, V>.() -> Unit)? = null): AnimationResult<T, V>

animateDecay中有个block的监听，动画发生变化的时候，会回调这个监听。
通过this.value能够取到当前的动画值。
我们可以通过这个block回调，来让其他view 响应这个动画的变化。

LaunchedEffect(key1 = Unit, block = {anim.animateDecay(2000.dp, decay) {//动画监听，可以获取动画当前的值 this.value}
})

8. Compose 动画系列

Compose 动画系列，后续持续更新
Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果
Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?
Compose 动画 (三) : AnimatedVisibility 从入门到深入
Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果
Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent
Compose 动画 (六) : 使用Transition管理多个动画，实现动画预览