このページは Cloud Translation API によって翻訳されました。

ビュー間のアニメーション

アプリの 2 つのビュー間をアニメーション化する方法について説明します。

Paul Lewis

リスト表示や詳細ビューの表示、サイドバーナビゲーションの表示など、アプリケーション内のビュー間でユーザーを移動したいことがよくあります。これらのビュー間をアニメーションで切り替えることで、ユーザーのエンゲージメントを維持し、プロジェクトに躍動感を与えることができます。

ビュー間を移動するには翻訳を使用します。left、top など、レイアウトをトリガーするプロパティは使用しないでください。
テンポの良いアニメーションを使用し、継続時間を短くします。
画面サイズの拡大に伴ってアニメーションとレイアウトがどのように変化するかを考慮してください。小さい画面で動作したものが、デスクトップで使用すると、奇妙に見えることがあります。

ビュー遷移の外観と動作は、扱うビューの種類によって異なります。たとえば、ビュー上でモーダルオーバーレイをアニメーション化する操作は、リストビューと詳細ビュー間の遷移とは異なるエクスペリエンスが必要です。

翻訳を使用してビュー間を移動します

ここでは、リストビューと詳細ビューの 2 つのビューがあると仮定します。ユーザーがリストビュー内のリストアイテムをタップすると、詳細ビューがスライドインし、リストビューがスライドアウトします。

この効果を実現するには、overflow: hidden が設定された両方のビューにコンテナが必要です。これにより、2 つのビューの両方をコンテナ内に横方向のスクロールバーを表示せずに横に並べ、必要に応じて各ビューをコンテナ内を左右にスライドさせることができます。

コンテナの CSS は次のとおりです。

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

コンテナの位置は relative に設定されています。つまり、その内部の各ビューを絶対的に左上隅に配置してから、変換によって移動させることができます。このアプローチは、left プロパティを使用する場合よりもパフォーマンスに優れており（レイアウトとペイントをトリガーするため）、通常は合理化が簡単です。

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

transform プロパティに transition を追加すると、優れたスライド効果が得られます。印象が良くなるように、カスタムの cubic-bezier 曲線を使用しています。これについては、カスタムイージングのガイドで説明しています。

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

画面外にあるビューは右側に移動する必要があるため、この場合は詳細ビューを移動する必要があります。

.details-view {
  transform: translateX(100%);
}

クラスを処理するために、少量の JavaScript が必要になります。これにより、ビューの適切なクラスが切り替わります。

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

最後に、これらのクラスの CSS 宣言を追加します。

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

試してみる

これを拡張して複数のビューに対応することもできますが、基本的な考え方は変わりません。つまり、非表示のビューはそれぞれオフスクリーンにし、必要に応じてオンにし、現在オンスクリーンビューを移動する必要があります。

この手法は、ビュー間の遷移だけでなく、サイドバーのナビゲーション要素などの他のスライドイン要素にも適用できます。唯一の違いは、他のビューを移動する必要がないことです。

アニメーションが大画面で動作することを確認する

大画面の場合は、リストビューを削除するのではなく、常に表示したままにして、右側から詳細ビューをスライドします。これは、ナビゲーションビューの場合とほぼ同じです。