Jetpack Composeでロゴをシュッと出してみる

本投稿は TECOTEC Advent Calendar 2023 の5日目の記事です

こんにちは、決済認証システム開発事業部の飯髙です。
普段はAndroidアプリ開発に携わっています。

業務でアプリをビルドした際にスプラッシュ画面を見ることが多いのですが、そこにはクールに「シュッ」と登場するロゴが。度々カッコイイな！、と感じてます。

最近Jetpack Composeを触っており、「Jetpack Composeで作ったらどんな感じになるんだろう？」とふと疑問に思いました。
ですので今回はJetpack Composeにてロゴを「シュッ」と出す方法について研究してみました！

結論

結論から言うと、この設定が個人的には一番カッコイイと考えています。

var startAnimation by remember { mutableStateOf(false) }
val alpha by animateFloatAsState(
    targetValue = if (startAnimation) 1f else 0f, // 画面開始時に透明度を調整
    animationSpec = tween(
        durationMillis = 500,
        delayMillis = 1200,
        easing = FastOutSlowInEasing
    ), 
label = "",
)
// Composable起動時にブロック内を処理
LaunchedEffect(key1 = true) { 
        startAnimation = true
}

あとはこれを適用したいImageや、TextにModifirer.alphaとして設定します。

// 適用例
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Image(
        painter = painterResource(id = R.drawable.logo),
        contentDescription = "null",
        modifier = Modifier.alpha(alpha)
    )
}

設定の考察

何故このような設定にしたかを説明します。
まず、作成しようとしていたロゴ表示は以下のようなものになります(スプラッシュ画面想定)。

・画面起動時は何も表示されていないところからフェードインするように

・シュッと出す(ここ大事)

次に、ロゴの出方はほぼほぼこの3つの要素で決まります。

・durationMillis // アニメーションの持続時間(ミリ秒)
・delayMillis // アニメーション開始前の遅延時間(ミリ秒)
・easing　// アニメーションのイージング関数(時間経過に伴うパラメータの変化率を指定する関数)

durationMillis

durationMillisは少なくとも、短すぎるとフェードインが早すぎて「シュッ」というよりも「パッ」と表示されるようになります。
逆に長すぎると「フワッ」とします(その前に遷移させてしまうのも手ですが)。

delayMillis

delayMillisは短すぎると画面を起動する -> 画面が見えるという流れでは、delayがそこまでかからずに表示されてしまいます(アプリの起動込みでdelayをかける必要あり)
逆に長すぎるとロゴが表示されずに何もない画面を見せられ続けるため、体験として良くありません。いい感じのところを狙っていく必要があります。

easing

そしてEasingですが、こちら様々な種類*1があります。

LinearEasing
FastOutSlowInEasing
FastOutLinearInEasing
LinearOutSlowInEasing
EaseInOutEasing
...etc

基本的にはアニメーションの開始から終了をどのペースで動かすか、というのを決定します。
「シュッ」と出すなら早さだければいいでしょ！と考えながら選んでおりましたが、「パッ」と表示されてしまうことが多かったです。
最終的には終了を遅くするようにすることで望んでいたアニメーションになりました。
これらの検討を踏まえて調整し、最初の結論に至りました。

以上で「Jetpack Composeでロゴをシュッと出してみる」を終わりにします。気になりましたら皆様もぜひ！「カッコイイ」アニメーションを作成してみてください！