使用JetPack Compose 的 Text控件，实现跑马灯效果

要实现跑马灯效果，可以使用`Animatable`和`AnimatableVector`来创建一个自定义的跑马灯效果的`Text`控件。

首先，需要添加以下依赖到你的项目中：

implementation "androidx.compose.animation:animation:1.0.0"
implementation "androidx.compose.animation:animation-core:1.0.0"
implementation "androidx.compose.animation:animation-graphics:1.0.0"

然后，可以创建一个自定义的`MarqueeText`控件，继承自`Text`：

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.*
import androidx.compose.animation.core.AnimationConstants.Infinite
import androidx.compose.foundation.layout.Box
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.vector.PathNode
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun MarqueeText(
    text: String,
    modifier: Modifier = Modifier,
    speed: Dp = 100.dp,
    textColor: Color = Color.Black,
    backgroundColor: Color = Color.White,
) {
    var textWidth by remember { mutableStateOf(0f) }
    var offsetX by remember { mutableStateOf(0f) }
    var isRunning by remember { mutableStateOf(false) }

    val infiniteTransition = rememberInfiniteTransition()

    val animatedValue = animateFloatAsState(
        targetValue = if (isRunning) -textWidth else 0f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = (textWidth / speed).toInt(), easing = LinearEasing),
            repeatMode = RepeatMode.Restart,
        )
    )

    LaunchedEffect(text) {
        isRunning = true
    }

    Box(modifier = modifier) {
        Text(
            text = text,
            modifier = Modifier.alpha(0f),
            onTextLayout = { layoutResult ->
                textWidth = layoutResult.size.width.toFloat()
            }
        )

        Box(
            modifier = Modifier.offset(x = animatedValue.value)
                .onSizeChanged { size ->
                    offsetX = size.width.toFloat()
                }
        ) {
            Text(
                text = text,
                modifier = Modifier.offset(x = offsetX),
                color = textColor,
                onTextLayout = { layoutResult ->
                    textWidth = layoutResult.size.width.toFloat()
                }
            )
        }

        Box(
            modifier = Modifier.offset(x = animatedValue.value + offsetX)
                .onSizeChanged { size ->
                    offsetX += size.width.toFloat()
                }
        ) {
            Text(
                text = text,
                color = textColor,
                backgroundColor = animateColorAsState(targetValue = backgroundColor).value,
                onTextLayout = { layoutResult ->
                    textWidth = layoutResult.size.width.toFloat()
                }
            )
        }
    }
}

然后，你可以在你的Compose函数中使用`MarqueeText`控件来实现跑马灯效果：

@Composable
fun MyScreenContent() {
    MarqueeText(
        text = "Hello, Jetpack Compose!",
        modifier = Modifier.fillMaxWidth(),
        speed = 100.dp,
        textColor = Color.White,
        backgroundColor = Color.Blue,
    )
}

这样，你就可以在你的界面上看到一个带有跑马灯效果的文本了。你可以根据需要调整`speed`来控制跑马灯的速度，`textColor`和`backgroundColor`来设置文本和背景颜色。