携手创作，共同生长！这是我参与「日新方案 8 月更文挑战」的第1天，点击检查活动详情。
现在互联网产品，感觉谁家的App不整点视频功能，严格意义上都不能说是一个现代互联网App了，咱们知道最火的是抖音、快手这类短视频App，在刷视频的同时，他们的App交互上面的一些特征能让咱们一直沉浸在刷视频中；
比方，咱们今日要聊的，短视频翻页流列表，视频加载缓冲的时分，Loading的规划：
它规划：在视频底部，进度条上面，当视频缓冲加载等待的时分，它有一个波纹的分散作用，
即不搅扰用户刷视频的操作，也没有很明显的突兀作用
（比方：突兀的屏幕中心大圆圈Loading，就很突兀）
一定要记住：『点赞❤️+关注❤️+收藏❤️』起来，划走了可就再也找不到了
咱们先来看一下“抖音、快手App”的视频进度条Loading作用（GIF图稍微失真了点）
快手短视频主页的视频Loading
从视频里边能够看出来在视频底部，出现缓冲加载视频的时分，会有一个：“从中心往2边分散”的作用。
GIF图放慢了一点，便利大家观看，实践研讨进程，我一般是经过录制完视频，经过相册的视频编辑，去一帧一帧看，做了哪些动作，如下：
看完，咱们发现：
1、一开端是在屏幕中心的位置，大约是20dp左右的宽度开端显现；
2、从中心分散到屏幕边际之后，会履行渐隐；
3、渐隐到通明，又开端从中心往2边分散；
有了上面的序幕，咱们就能够开端咱们的编码了，那么在开端编码前，必定需求知道宽度是多少，这里咱们拿BoxWithConstraints来包咱们的child composable， 咱们能够看到BoxWithConstraints的代码如下：
// 代码来自：androidx.compose.foundation.layout
@Composable
@UiComposable
fun BoxWithConstraints(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content:
@Composable @UiComposable BoxWithConstraintsScope.() -> Unit
) {
val measurePolicy = rememberBoxMeasurePolicy(contentAlignment, propagateMinConstraints)
SubcomposeLayout(modifier) { constraints ->
val scope = BoxWithConstraintsScopeImpl(this, constraints)
val measurables = subcompose(Unit) { scope.content() }
with(measurePolicy) { measure(measurables, constraints) }
}
}
里边用到了SubcomposeLayout，来推延内容组合，咱们能够在BoxWithConstraintsScope里边获取到最大宽度maxWidth (单位dp)。
Loading线条，咱们能够用DrawScope.drawLine来画，分散作用必定需求有动画来更新。
咱们运用 rememberInfiniteTransition() 履行无限动画，运用animateFloat来获取动画更新的值：
// 代码来自：androidx.compose.animation.core
@Composable
fun InfiniteTransition.animateFloat(
initialValue: Float,
targetValue: Float,
animationSpec: InfiniteRepeatableSpec<Float>
): State<Float>
初始值(initialValue)能够界说成50F(读者可自行修改)，目标值(targetValue)界说多少适宜呢？
经过慢镜头检查“抖音、快手”的作用，发现它分散完，会“渐隐到通明”，然后再从intialValue处开端重新分散。
targetValue界说成maxWidth不可，那么咱们拉大这个数值，能够界说成大约1.8倍的maxWidth;
因为maxWidth获取到的是dp单位的，咱们需求转换成px，下面咱们统一叫：width
val width = with(LocalDensity.current) { maxWidth.toPx() }
然后，咱们的线条动画值就变成下面这样：
val lineProgressAnimValue by infiniteTransition.animateFloat(
initialValue = 100F,
targetValue = width * 1.8F,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = TIME_PERIOD,
easing = FastOutLinearInEasing
)
)
)
private const val TIME_PERIOD = 1100
线条分散到屏幕边际的时分，需求履行渐隐，得出下面的alpha
val lineAlphaValue = if(lineProgressAnimValue <= width) {
// 读者能够依据自己体验
lineProgressAnimValue * 1.0F/ width * 1.0F
// 读者能够依据自己体验
//Math.min((lineProgressAnimValue.value) * 1.0F / width * 1.0F, 0.7F)
// 抖音、快手看作用都是1F，依据自己体验来设置吧
// 1F
} else {
// 分散到屏幕边际的时分，开端触发：渐隐
(width * 1.8F - lineProgressAnimValue) / width * 0.8F
}
// 线条宽度
val lineWidth = if(lineProgressAnimValue <= width) {
lineProgressAnimValue / 2
} else {
width / 2
}
最后，咱们经过Canvas来制作这个线条
Canvas(modifier = modifier) {
drawLine(
color = Color.White.copy(alpha = lineAlphaValue),
start = Offset(x = size.width / 2 - lineWidth, y = 0F),
end = Offset(x = size.width / 2 + lineWidth, y = 0F),
strokeWidth = 2.5F
)
}
来看看咱们的终究作用吧：
往期文章引荐：
1.Jetpack Compose UI创建布局制作流程+原理 —— 内含概念详解（满满干货）
2.正确实践Jetpack SplashScreen API —— 在所有Android体系上运用总结，内含原理剖析
3.源码剖析 | ThreadedRenderer空指针问题，顺便把Choreographer认识一下
4.源码剖析 | 事情是怎样传递到Activity的？
5.Jetpack Compose – FloatingActionButton 打开/折叠 的多级悬浮菜单
6.如何禁用无障碍模仿点击，提高使用收益
