在上一篇文章Compose开箱即用的动画API中,在compose动画的学习使用过程中,有一个参数属性一直存在,那就是AnimationSpec。不管是用于为单个值添加动画效果的animate*AsState,还是用于为多个值添加动画效果的updateTransition,亦或是一些封装好的高级别动画API:animatedContentSize、AnimatedVisibility,在这些里面都存在着AnimationSpec这个参数属性。但如果你并不了解并不会使用AnimationSpec,也不会阻碍你使用这些动画API,因为这些动画API都提供了默认的AnimationSpec实现。
interface AnimationSpec<T> {
fun <V : AnimationVector> vectorize(
converter: TwoWayConverter<T, V>
): VectorizedAnimationSpec<V>
}
AnimationSpec,the specification of an animation,是一个接口,它用来存储动画规格,包括要进行动画处理的数据类型、将数据转换为动画后将使用的动画配置。
Compose已经为我们实现了一些常用的AnimationSpec。
AnimationSpec
官方提供了8种可以直接使用的(蓝色标注的为类,可以直接使用)。
SpringSpec
SpringSpec,弹性动画,是许多动画的默认AnimationSpec实现,例如animate*AsState、updateTransition、animatedContentSize等这些动画。
@Stable
fun <T> spring(
dampingRatio: Float = Spring.DampingRatioNoBouncy,
stiffness: Float = Spring.StiffnessMedium,
visibilityThreshold: T? = null
): SpringSpec<T> =
SpringSpec(dampingRatio, stiffness, visibilityThreshold)
官方提供了spring()方法用于构造SpringSpec,接收三个参数,但都有其默认值。
- dampingRatio:阻尼比,默认值为Spring.DampingRatioNoBouncy = 1f,也就是没有弹性。当阻尼比<1时,阻尼比越低,弹簧越有弹性。
- stiffness:刚度,默认值为Spring.StiffnessMedium。
- visibilityThreshold:可见性阈值。
dampingRatio和stiffness都各有5个枚举值。
@Composable
fun SpringDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessHigh
)
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-spring")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
我们使用一个size大小动画来观察SpringSpec效果,修改上述代码的spring中参数可以观察到各种SpringSpec效果,在同样的dampingRatio = Spring.DampingRatioNoBouncy,也就是没有弹性时,刚度越小,动画时间越长,动画效果越明显。而在较低的刚度下,阻尼比越小,弹性动画效果就越明显。
TweenSpec
TweenSpec,用来创建使用给定的持续时间、延迟时间和缓和曲线配置的动画规格。
@Stable
fun <T> tween(
durationMillis: Int = DefaultDurationMillis,
delayMillis: Int = 0,
easing: Easing = FastOutSlowInEasing
): TweenSpec<T> = TweenSpec(durationMillis, delayMillis, easing)
官方提供了tween()方法用于构造TweenSpec,接收三个参数,但都有其默认值。
- durationMillis:动画持续时间,默认值为300毫秒。
- delayMillis:动画延迟时间,默认值为0,也就是立即开始动画。
- easing:动画曲线变化,默认值为FastOutSlowInEasing
@Stable
fun interface Easing {
fun transform(fraction: Float): Float
}
Easing是一个接口,是一种调整动画分数的方法,允许过渡元素加速或减速,而不是以恒定的速度移动,Easing中有一个方法,方法中参数 fraction 是一个在0到1.0之间的值,表示动画中的当前进度点,其中0表示开始,1.0表示结束。
Easing只有一个实现类CubicBezierEasing,CubicBezierEasing实现了三阶贝塞尔曲线。官方推荐与其创建新实例,不如考虑使用一种常见的 cubic Easings。
官方提供4种常用的Easing实现:
//以静止开始和结束的元素使用此标准缓动。 他们快速加速并逐渐减速,以强调过渡的结束。这是最常见的方式。这相当于原生安卓插值器FastOutSlowInInterpolator
val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
//传入的元素使用减速缓动进行动画处理,它以峰值速度(元素运动的最快点)开始过渡并在静止时结束。这相当于原生安卓插值器LinearOutSlowInInterpolator
val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
//退出屏幕的元素使用加速缓动,它们从静止开始并以峰值速度结束。这相当于原生安卓插值器FastOutLinearInInterpolator
val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)
//线性、匀速缓动
val LinearEasing: Easing = Easing { fraction -> fraction }
我们将SpringSpec中的案例使用spring改为使用tween来观察TweenSpec效果,修改代码的tween中参数可以观察到各种TweenSpec效果。为了能更好的观察到动画效果,可以将动画时间适当设置长一点。
@Composable
fun TweenDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = tween(
durationMillis = 3000,
easing = FastOutSlowInEasing
)
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-tween")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
SnapSpec
SnapSpec,描述了一种跳切类型的动画。 它立即将动画值捕捉到最终值。
@Stable
fun <T> snap(delayMillis: Int = 0) = SnapSpec<T>(delayMillis)
官方提供了snap()方法用于构造SnapSpec,只有一个参数,delayMillis:动画延迟时间,默认值为0,也就是立即开始动画。
@Immutable
class SnapSpec<T>(val delay: Int = 0) : DurationBasedAnimationSpec<T> {
override fun <V : AnimationVector> vectorize(
converter: TwoWayConverter<T, V>
): VectorizedDurationBasedAnimationSpec<V> = VectorizedSnapSpec(delay)
}
SnapSpec实现了DurationBasedAnimationSpec接口,还有上面已经介绍过的TweenSpec也是实现了DurationBasedAnimationSpec接口,此外还有KeyframesSpec。
@Immutable
class TweenSpec<T>(
val durationMillis: Int = DefaultDurationMillis,
val delay: Int = 0,
val easing: Easing = FastOutSlowInEasing
) : DurationBasedAnimationSpec<T> {
override fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>) =
VectorizedTweenSpec<V>(durationMillis, delay, easing)
}
interface DurationBasedAnimationSpec<T> : FiniteAnimationSpec<T> {
override fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>):
VectorizedDurationBasedAnimationSpec<V>
}
DurationBasedAnimationSpec,描述了基于固定持续时间的 AnimationSpecs,例如 KeyframesSpec、TweenSpec 和 SnapSpec。 这些基于持续时间的AnimationSpec在放入RepeatableSpec时可以重复执行。
我们将上面的案例改为使用snap来观察SnapSpec效果,将动画延迟1秒来观察snap跳切的效果。
@Composable
fun SnapDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = snap(
delayMillis = 1000
)
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-snap")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
KeyframesSpec
KeyframesSpec,基于动画持续时间中不同时间戳定义的值(即不同的关键帧)来制作动画。每个关键帧都可以使用KeyframesSpecConfig.at来进行定义。
@Stable
fun <T> keyframes(
init: KeyframesSpec.KeyframesSpecConfig<T>.() -> Unit
): KeyframesSpec<T> {
return KeyframesSpec(KeyframesSpec.KeyframesSpecConfig<T>().apply(init))
}
官方提供了keyframes()方法用于构造KeyframesSpec,只有一个参数KeyframesSpec.KeyframesSpecConfig。
class KeyframesSpecConfig<T> {
//动画持续时间,默认为300
var durationMillis: Int = DefaultDurationMillis
//动画延迟时间,默认为0
var delayMillis: Int = 0
//关键帧
internal val keyframes = mutableMapOf<Int, KeyframeEntity<T>>()
//添加一个关键帧在某个时间点时刻
infix fun T.at(/*@IntRange(from = 0)*/ timeStamp: Int): KeyframeEntity<T> {
return KeyframeEntity(this).also {
keyframes[timeStamp] = it
}
}
//添加一个关键帧在某个进度时刻
infix fun T.atFraction(fraction: Float): KeyframeEntity<T> {
return at((durationMillis * fraction).roundToInt())
}
//为刚提供的时间戳开始的时间间隔添加 Easing
infix fun KeyframeEntity<T>.with(easing: Easing) {
this.easing = easing
}
KeyframesSpecConfig存储关键帧的可变配置,包括 durationMillis、delayMillis 和所有关键帧。 每个关键帧都定义了特定时间的动画值。
看一下具体使用和效果:
@Composable
fun KeyframesDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = keyframes {
durationMillis = 1000
50.dp at 0 with LinearOutSlowInEasing
60.dp at 100 with FastOutLinearInEasing
70.dp at 300
80.dp at 600
}
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-keyframes")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
RepeatableSpec
RepeatableSpec,构建一个基于DurationBasedAnimationSpec的重复动画。
@Stable
fun <T> repeatable(
iterations: Int,
animation: DurationBasedAnimationSpec<T>,
repeatMode: RepeatMode = RepeatMode.Restart,
initialStartOffset: StartOffset = StartOffset(0)
): RepeatableSpec<T> =
RepeatableSpec(iterations, animation, repeatMode, initialStartOffset)
官方提供了repeatable()方法用于构造RepeatableSpec,四个参数,需要至少传入两个参数。
- iterations:重复次数,理论上应大于1,等于1表示不重复,也就没有必要使用RepeatableSpec。
- animation:将被重复的AnimationSpec,必须是DurationBasedAnimationSpec,也就是可以使用KeyframesSpec 、SnapSpec 和TweenSpec。
- repeatMode:重复模式
- initialStartOffset:动画开始的偏移
RepeatMode有两种模式:
enum class RepeatMode {
//将重新启动动画,并从开始值到结束值进行动画处理。
Restart,
//将在动画重复时反转上一次迭代
Reverse
}
在 RepeatMode.Reverse 模式下重复时,强烈建议迭代次数为奇数。否则,动画可能会在完成最后一次迭代时跳转到结束值。
initialStartOffset 可用于延迟动画的开始或将动画快进到给定的播放时间。 此起始偏移量不会重复,而动画中的延迟(如果有)将重复。 默认情况下,偏移量为 0。
@kotlin.jvm.JvmInline
value class StartOffset private constructor(internal val value: Long) {
constructor(offsetMillis: Int, offsetType: StartOffsetType = StartOffsetType.Delay) : this(
(offsetMillis * offsetType.value).toLong()
)
val offsetMillis: Int
get() = abs(this.value.toInt())
val offsetType: StartOffsetType
get() = when (this.value > 0) {
true -> StartOffsetType.FastForward
false -> StartOffsetType.Delay
}
}
StartOffset存储一个offsetMillis时间和StartOffsetType类型,StartOffsetType类型有两类:StartOffsetType.Delay延迟动画的开始和StartOffsetType.FastForward快进动画到给定的播放时间,并立即开始播放。
@kotlin.jvm.JvmInline
value class StartOffsetType private constructor(internal val value: Int) {
companion object {
//延迟动画的开始
val Delay = StartOffsetType(-1)
//快进动画到给定的播放时间,并立即开始播放。
val FastForward = StartOffsetType(1)
}
}
使用repeatable,将animation设置为一个1秒的匀速变化的tween动画,重复3次,重复方式为反转重复,initialStartOffset设置为延迟500毫秒,StartOffsetType.FastForward。
@Composable
fun RepeatableDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = repeatable(
iterations = 3,
animation = tween(durationMillis = 1000, easing = LinearEasing),
repeatMode = RepeatMode.Reverse,
initialStartOffset = StartOffset(500, StartOffsetType.FastForward)
)
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-repeatable")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
整个动画效果:快进到500毫秒处,然后立即开始匀速动画,又500毫秒后开始反转动画。
InfiniteRepeatableSpec
InfiniteRepeatableSpec,构建一个基于DurationBasedAnimationSpec的无限重复动画。
@Stable
fun <T> infiniteRepeatable(
animation: DurationBasedAnimationSpec<T>,
repeatMode: RepeatMode = RepeatMode.Restart,
initialStartOffset: StartOffset = StartOffset(0)
): InfiniteRepeatableSpec<T> =
InfiniteRepeatableSpec(animation, repeatMode, initialStartOffset)
官方提供了infiniteRepeatable()方法用于构造InfiniteRepeatableSpec,相比RepeatableSpec少了一个参数iterations,无限重复动画自然是不需要重复次数的,其余参数都一样。
@Composable
fun InfiniteRepeatableDemo() {
var small by remember {
mutableStateOf(true)
}
val size: Dp by animateDpAsState(
targetValue = if (small) 40.dp else 100.dp,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 1000, easing = LinearEasing),
repeatMode = RepeatMode.Reverse,
initialStartOffset = StartOffset(500, StartOffsetType.FastForward)
)
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = { small = !small }) {
Text(text = "改变方块大小-infiniteRepeatable")
}
Box(
modifier = Modifier
.size(size)
.background(Color.LightGray)
)
}
}
FloatAnimationSpec
FloatAnimationSpec是一个接口,有两个实现类,FloatTweenSpec仅针对Float类型做TweenSpec动画,FloatSpringSpec仅针对Float类型做SpringSpec动画。官方没有提供可以直接进行使用的方法,因为tween()和spring()支持全量数据类型,FloatAnimationSpec是底层做更精细的计算的时候才会去使用。
网友评论