Jetpack Compose Academy · レッスン

単純な補間にanimate*AsStateを使う

単一の値を自動的にアニメーション化します。

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

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

Animation, the Easy Way

Compose can animate changes for you. The simplest tool is the animate*AsState family, which smoothly moves a value from old to new. ✨

What animateDpAsState Does

When your target value changes, animateDpAsState returns a State that glides toward it over a few frames instead of jumping.

val size by animateDpAsState(targetValue = if (big) 200.dp else 100.dp)

Read It Like Normal State

The animated value is just a State you read with by. Use it in a Modifier and the UI follows the animation every frame.

Box(Modifier.size(size).background(Color.Blue))

A Whole Family of Helpers

There is one per type: animateFloatAsState, animateColorAsState, animateDpAsState, and more. Pick the one matching the value you want to tween.

Animate a Color

Use animateColorAsState to fade between colors. Toggle a boolean and watch the background shift smoothly from one tint to another. 🎨

val color by animateColorAsState(if (on) Color.Green else Color.Gray)

Animate Transparency

For fade in and out, animate a float and feed it to alpha. A value of 0f is invisible, 1f is fully opaque.

val a by animateFloatAsState(if (visible) 1f else 0f)
Box(Modifier.alpha(a))

Choose the Pace

Pass an animationSpec to control timing. A tween lets you set the duration in milliseconds and an easing curve.

animateDpAsState(target, animationSpec = tween(durationMillis = 500))

Spring for Bounce

Swap in a spring spec for natural, physics-based motion. Tune dampingRatio and stiffness to add a little playful bounce.

animateDpAsState(target, animationSpec = spring(dampingRatio = 0.4f))

It Reacts to State

You never call start or stop. When the target value changes during recomposition, the animation restarts toward the new goal automatically.

Smooth, Not Linear

Default easing makes motion feel alive by speeding up then slowing down. Easing curves like FastOutSlowInEasing avoid robotic, constant-speed movement.

Listen When It Finishes

Need to react when motion ends? Pass a finishedListener lambda, which fires once with the final value after the animation settles.

animateDpAsState(target) { final -> /* done */ }

Quick Check

Which spec gives motion a natural, bouncy physics feel?

Recap: One Value at a Time

You learned animate*AsState: change a target, read the animated State, and pick tween or spring. It is the quickest way to add smooth single-value motion. 🎉

よくある質問

「単純な補間にanimate*AsStateを使う」レッスンは無料ですか？

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

「単純な補間にanimate*AsStateを使う」で何を学びますか？

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

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

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

「単純な補間にanimate*AsStateを使う」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る