アニメーションの概要

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() が提供するオプション バンドルを渡します。オプションのバンドルには、アニメーション中に遷移フレームワークがアクティビティ間で接続できるように、アクティビティ間で共有されるビューを含めることもできます。

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