Composeで画像を横スクロールしながら表示する

はじめに

今回はJetpackComposeを使って画像の横スクロールをしてみたいと思います

コード

Compose関数ないで下記を定義し、スクロールさせたい画像のModifierに.offset { IntOffset(offsetX.value.toInt(), 0) }を定義すれば完了です

 val offsetX = remember { Animatable(0f) }

    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    val pxWidth = with(LocalDensity.current) { screenWidth.toPx() }

    LaunchedEffect(Unit) {
        // 画面の外から左端までの移動をループ
        while (true) {
            // アニメーションの初期位置を右端にリセット
            offsetX.snapTo(pxWidth)

            offsetX.animateTo(
                targetValue = -pxWidth,
                animationSpec = tween(
                    durationMillis = 20000, // 20秒で移動
                    easing = LinearEasing
                )
            )
        }
    }

最後に

方向や時間さえ変えて仕舞えば他にも応用がきくので、備忘録として残しておきます