アニメーションの概要

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でアニメーションを使用する方法を学びます。

アニメーションを使用すると、アプリ内で何が起こっているのかを、視覚的な手掛かりとしてユーザーに知らせることができます。アニメーションは、新しいコンテンツが読み込まれたときや、新しいアクションが利用可能になったときなど、UI の状態が変化したときに特に役立ちます。また、アニメーションを使用するとアプリの外観が洗練され、高品質の外観になります。

Android には、必要なアニメーションのタイプに応じてさまざまなアニメーション API が用意されています。このドキュメントでは、UI にモーションを追加するさまざまな方法の概要について説明します。

アニメーションを使用するタイミングについて理解を深めるには、モーションに関するマテリアル デザイン ガイドもご覧ください。

ビットマップをアニメーション化する

図 1. アニメーション化されたドローアブル。

アイコンやイラストなどのビットマップ グラフィックをアニメーション化するには、ドローアブル アニメーション API を使用します。通常、これらのアニメーションはドローアブル リソースを使用して静的に定義されますが、実行時にアニメーションの動作を定義することもできます。

たとえば、2 つのアクションが関連していることをユーザーに伝えるには、再生ボタンをタップするとアニメーションが一時停止ボタンに変わります。

詳しくは、ドローアブル グラフィックをアニメーション化するをご覧ください。

UI の表示とモーションをアニメーション化する

図 2. ダイアログの表示 / 非表示のときにわずかにアニメーション化すると、UI の変更が煩わしさを感じにくくなります。

レイアウト内のビューの表示と位置を変更する必要がある場合は、UI がどのように変化しているかをユーザーが理解できるように、微妙なアニメーションを含めることをおすすめします。

現在のレイアウト内でビューを移動、表示、非表示にするには、Android 3.0(API レベル 11)以降で利用可能な android.animation パッケージで提供されるプロパティ アニメーション システムを使用します。これらの API は、View オブジェクトのプロパティを一定期間をかけて更新し、プロパティの変化に応じて継続的にビューを再描画します。たとえば、位置プロパティを変更すると、ビューが画面上を移動します。alpha プロパティを変更すると、ビューがフェードインまたはフェードアウトします。

これらのアニメーションを作成する最も簡単な方法は、レイアウトでアニメーションを有効にして、ビューの表示設定を変更したときにアニメーションが自動的に適用されるようにすることです。詳細については、レイアウトの更新を自動的にアニメーション化するをご覧ください。

プロパティ アニメーション システムを使用してアニメーションを作成する方法については、プロパティ アニメーションの概要をご覧ください。一般的なアニメーションの作成については、次のページもご覧ください。

物理学ベースのモーション

図 3. ObjectAnimator で作成したアニメーション。

図 4. 物理ベースの API で作成されたアニメーション。

可能な限り、現実世界の物理学をアニメーションに適用して、自然に見えるようにします。たとえば、ターゲットが変化しても勢いを維持し、変化中はスムーズに遷移する必要があります。

こうした動作を実現するため、Android サポート ライブラリには物理法則に基づいてアニメーションの実行を制御する物理ベースのアニメーション API が含まれています。

最も頻繁に利用される物理学ベース アニメーションとしては、次の 2 つがあります。

物理学に基づかないアニメーション(ObjectAnimator API で作成したものなど)は、かなり静的で持続時間も固定されています。ターゲット値が変更された場合は、ターゲット値の変更時にアニメーションをキャンセルし、新しい開始値としてアニメーションを再構成して、新しいターゲット値を追加する必要があります。視覚的には、図 3 に示すように、このプロセスによってアニメーションに突然停止し、その後にまとまりのない動きが作成されます。

DynamicAnimation などの物理学ベースのアニメーション API を使用して作成されるアニメーションは、力によって駆動されます。ターゲット値の変化は力の変化につながります。新しい力は既存の速度に適用されるため、新しい目標に継続的に移行します。この処理により、図 4 に示すように、より自然なアニメーションになります。

レイアウトの変更をアニメーション化する

図 5. 詳細を表示するアニメーションは、レイアウトを変更するか、新しいアクティビティを開始することで実現できます。

Android 4.4(API レベル 19)以降では、現在のアクティビティまたはフラグメント内でレイアウトを入れ替える際に、遷移フレームワークを使用してアニメーションを作成できます。必要な作業は、開始レイアウトと終了レイアウト、使用するアニメーションのタイプを指定することだけです。次に、システムが 2 つのレイアウト間のアニメーションを見つけて実行します。これを使用して、UI 全体を入れ替えたり、一部のビューのみを移動または置換したりできます。

たとえば、ユーザーがアイテムをタップして詳細情報を表示した場合、レイアウトをアイテムの詳細に置き換えて、図 5 のような遷移を適用できます。

開始レイアウトと終了レイアウトはそれぞれ Scene に格納されますが、開始シーンは通常、現在のレイアウトから自動的に決定されます。必要なアニメーションのタイプをシステムに伝える Transition を作成してから、TransitionManager.go() を呼び出します。システムはアニメーションを実行してレイアウトを入れ替えます。

詳しくは、遷移を使用してレイアウト変更をアニメーション化するをご覧ください。サンプルコードについては、BasicTransition をご覧ください。

アクティビティ間の切り替えをアニメーション化する

Android 5.0(API レベル 21)以降では、アクティビティ間で遷移するアニメーションを作成することもできます。これは、前のセクションで説明したのと同じ遷移フレームワークに基づいていますが、個別のアクティビティでレイアウト間のアニメーションを作成できます。

新しいアクティビティを横からスライドインする、フェードインするなどのシンプルなアニメーションを適用できますが、各アクティビティの共有ビュー間を遷移するアニメーションを作成することもできます。たとえば、ユーザーがアイテムをタップして詳細情報を表示した場合、図 5 のアニメーションのように、そのアイテムをシームレスに拡大して画面全体に表示するアニメーションを使用して、新しいアクティビティに遷移できます。

通常どおり、startActivity() を呼び出しますが、ActivityOptions.makeSceneTransitionAnimation() で提供されるオプションのバンドルを渡します。この一連のオプションには、アニメーション中に遷移フレームワークがアクティビティ間で接続できるように、アクティビティ間で共有されるビューが含まれている場合があります。

その他のリソースについては、以下をご覧ください。