Jetpack Compose で反転フラップ式案内表示機 (split-flap display) を実装する

これ。

まあ、AI で動くものはすぐにできる。

pic.twitter.com/4YfQjndUSz

— chanzmao (@maochanz) September 5, 2026

が、なんか微妙なよくわからないコード。

どんなロジックになっているのかな、と興味あったので、ロジックをみながら整理してみました。

切り替える文字列を以下に設定。


"各駅電車", "急行", "快速", "特急", "御座候"

そして、2つのレイヤーを重ねる。

・上下半分に分けた文字板
・アニメーションでめくれていく文字板

この考え方がいいようです。

重ね合わせには、Box と Modifier.zIndex() を使います。

下のレイヤーに配置する。

同じタイミングで、上下半分ずつの文字を切り替える。

上のレイヤーに配置する。

これを下のレイヤーに被せて、同期的にアニメーションさせる。

対象の Composable で Mofifier.graphicsLayer を使うと便利。

意図する回転方向と原点を指定するだけで良い。


modifier = Modifier
    .graphicsLayer {
        this.transformOrigin = TransformOrigin(...)
        this.rotationX = ...
    }

とりあえず、ある程度まで整理。

アニメーション知識なく AI で生成したコードから入ると、ある程度ロジックを理解するまでは不具合修正はもちろん、調整さえ自在にできない。

厳しい時代かもしれません。

#iOS | #Android Fashion News