Jetpack Compose Academy · レッスン

連動した動きにupdateTransitionを使う

1つの状態から複数の値をアニメーション化します。

「連動した動きにupdateTransitionを使う」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Animate Many Values Together

When several properties should change as one state shifts, you want them in sync. updateTransition coordinates many animations from a single state. ✨

Start From a State

Create a transition by handing updateTransition your current state. Compose watches it and drives every child animation when the state changes.

val transition = updateTransition(targetState = expanded)

Derive Animated Values

Ask the transition for each value with animateDp, animateColor, and friends. You give a lambda mapping each state to its target.

val size by transition.animateDp { if (it) 200.dp else 80.dp }

Many Values, One Source

Add as many child animations as you like from the same transition. Size, color, and corner radius all change together from one boolean.

val corner by transition.animateDp { if (it) 0.dp else 24.dp }

Perfectly Coordinated

Because they share one transition, the values stay in lockstep. There is no risk of size finishing before color, which can happen with separate animateAsState calls.

Use the Values in Modifiers

Read each animated value just like normal state and apply it. The whole element morphs smoothly as the transition runs every frame.

Box(Modifier.size(size).clip(RoundedCornerShape(corner)))

Per-Value Timing

Each child can have its own transitionSpec. Make color snap fast while size eases slowly, all still triggered by the same state change.

transition.animateDp(transitionSpec = { tween(600) }) { ... }

More Than Two States

Your state can be an enum, not just a boolean. Map each case to a target and the transition animates between any of them.

enum class BoxState { Collapsed, Half, Expanded }

Inspect Current and Target

The transition exposes currentState and targetState. You can check whether motion is still in flight or has settled on the goal.

When to Reach for It

Pick updateTransition when one event should drive a set of coordinated changes, like expanding a card while its color and elevation shift in unison. 🎬

Lighter Than Many Calls

Grouping animations under one transition is cleaner and easier to reason about than juggling several independent animate*AsState values.

Quick Check

What is the main benefit of updateTransition over separate animate*AsState calls?

Recap: One State, Many Motions

You learned updateTransition: derive several animated values from one state so they move in perfect sync, each with its own timing. 🎉

よくある質問

「連動した動きにupdateTransitionを使う」レッスンは無料ですか？

はい。「連動した動きにupdateTransitionを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「連動した動きにupdateTransitionを使う」で何を学びますか？

1つの状態から複数の値をアニメーション化します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「連動した動きにupdateTransitionを使う」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る