アニメーションの概要

アニメーションを使用すると、アプリ内で何が起こっているのかを、視覚的な手掛かりを通じてユーザーにわかりやすく伝えることができます。アニメーションは、新しいコンテンツがロードされたときや、新しいアクションが利用可能になったときなど、UI の状態が変化したときに特に役立ちます。また、アニメーションによって、アプリの外観を洗練させて、質の高いデザインを実現することができます。

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

アニメーションを使用すべきケースの詳細については、モーションに関するマテリアル デザイン ガイドをご覧ください。

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

図 1: アニメーション化したドローアブル

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

たとえば、再生ボタンをタップすると一時停止ボタンに変わるようにアニメーション化すれば、2 つのアクションの関連性がユーザーにもよく伝わり、一方を押すと他方が見えるようになることが直感的に理解できます。

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

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

図 2: ダイアログの表示 / 非表示を切り替える際に軽くアニメーション化することで、UI 変更の不快感を抑えるテクニック

レイアウト内のビューの表示や位置を変更する必要がある場合、軽くアニメーション化することで、UI がどのように変化するのかをユーザーが把握しやすくなります。

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

最小限の労力でこのようなアニメーションを作成するには、レイアウト上でアニメーションを有効にして、ビューの表示を変更します。これだけで、アニメーションが自動的に適用されます。詳細については、レイアウトの更新を自動でアニメーションにするをご覧ください。

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

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

図 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() で利用できるオプション バンドルを渡します。このオプション バンドルを使用して、アクティビティ間で共有するビューを指定することで、遷移フレームワークがアニメーション中にアクティビティを接続できるようになります。

詳細については、アニメーションを使用してアクティビティを起動するをご覧ください。サンプルコードについては、ActivitySceneTransitionBasic をご覧ください。