见网站建设客户技巧,注册公司费用大概多少,国外免备案域名,两学一做专栏网站1. Animatable和animateDpAsState的区别是什么
Animatable是Android Compose动画的底层API#xff0c;如果我们查看源码#xff0c;可以发现animateDpAsState内部是调用的animateValueAsState#xff0c;而animateValueAsState内部调用的是Animatable
animateDpAsState比A…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 : 是TwoWayConverterT, 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是TwoWayConverterFloat, AnimationVector1D类型说明是直接转换成Float的
val Float.Companion.VectorConverter: TwoWayConverterFloat, AnimationVector1Dget() FloatToVectorprivate val FloatToVector: TwoWayConverterFloat, 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: TwoWayConverterDp, AnimationVector1Dget() DpToVectorD代表的是维度即dimension的意思。1D、2D、3D、4D分别代表着一维、二维、三维、四维
val animatableOffset remember {Animatable(Offset(100F, 100F), Offset.VectorConverter)
}比如这个Offset就是二维的
val Offset.Companion.VectorConverter: TwoWayConverterOffset, AnimationVector2Dget() OffsetToVector4. 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,key2456,key3789, 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 {exponentialDecayDp()
}
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(): DecayAnimationSpecT {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: DecayAnimationSpecT,block: (AnimatableT, V.() - Unit)? null): AnimationResultT, VanimateDecay中有个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管理多个动画实现动画预览
