// 代碼來自：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來畫，擴散效果肯定需要有動畫來更新。

animateFloat獲取動畫更新值

我們使用 rememberInfiniteTransition() 執(zhí)行無限動畫，使用animateFloat來獲取動畫更新的值：

// 代碼來自：androidx.compose.animation.core
@Composable
fun InfiniteTransition.animateFloat(
    initialValue: Float,
    targetValue: Float,
    animationSpec: InfiniteRepeatableSpec<Float>
): State<Float>

初始值(initialValue)可以定義成50F(讀者可自行修改)，目標值(targetValue)定義多少合適呢？

通過慢鏡頭查看“抖音、快手”的效果，發(fā)現(xiàn)它擴散完，會“漸隱到透明”，然后再從intialValue處開始重新擴散。

targetValue定義成maxWidth不行，那么我們拉大這個數(shù)值，可以定義成大概1.8倍的maxWidth;

由于maxWidth獲取到的是dp單位的，我們需要轉換成px，下面我們統(tǒng)一叫：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

執(zhí)行漸隱

線條擴散到屏幕邊緣的時候，需要執(zhí)行漸隱，得出下面的alpha

val lineAlphaValue = if(lineProgressAnimValue <= width) {
    // 讀者可以根據(jù)自己體驗
    lineProgressAnimValue * 1.0F/ width * 1.0F
    // 讀者可以根據(jù)自己體驗
    //Math.min((lineProgressAnimValue.value) * 1.0F / width * 1.0F, 0.7F)
    // 抖音、快手看效果都是1F，根據(jù)自己體驗來設置吧
    // 1F
} else {
    // 擴散到屏幕邊緣的時候，開始觸發(fā)：漸隱
    (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
    )
}