言語: HTML | XAML

アプリでのアニメーションの使用 (HTML)

Applies to Windows and Windows Phone

他の Windows アプリと一貫性のある、軽快で柔軟なユーザー エクスペリエンスを実現するには、Windows 8 JavaScript アプリでアニメーションを使います。アニメーションを使うと、UI 状態を切り替えることによって、ユーザー入力に対するアプリの応答性を高めることができます。アニメーションによって、視覚的な合図を取り入れることができます。また、アニメーションはアプリの操作を邪魔したり、アプリの操作をわかりづらくするものではありません。

このトピックで取り上げる多くの概念を説明したサンプルは、HTML アニメーション ライブラリのサンプルに関するページからダウンロードできます。このトピック内のコード例は、そのサンプルから抜き出したものです。

ロードマップ: このトピックと他のトピックとの関連については、以下をご覧ください。

アニメーション ソース

一部のアニメーション ソースは、Windows コントロールに組み込まれています。これらのコントロールを使うと、追加のコーディングをせずにアニメーションを適用できます。また、アニメーション ライブラリを使うこともできます。アニメーション ライブラリを使うと、Windows デザインの外観を維持しながら、アプリ用のカスタム アニメーションを作ることができます。

組み込みアニメーションを使う

一部のアプリケーションは、Windows の一部として自動的に提供されます。

Windows システムのアニメーション

システムが提供する一部のアニメーションは、すべてのアプリ ウィンドウに適用できます。これらのシステム アニメーションを適用するために、アプリで明示的に処理を実行する必要はありません。ただし、注意する必要がある重要なポイントがいくつかあります。ここでは、それらのポイントを説明します。

アプリの起動

アプリの起動では、2 つのアニメーションが関連します。最初のアニメーションでは、スタート画面でアプリを選んでから、アプリのスプラッシュ画面が表示されるまでの間に、アプリの起動が示されます。2 番目のアニメーションでは、スプラッシュ画面からアプリの背景へのクロスフェードが行われます。アプリでもアプリ独自のアニメーションを実行して、スプラッシュ画面が消えてから、コンテンツの最初のページを表示することをお勧めします。

回転とサイズ変更の変化

アプリがサイズや向きの変化に応じてレイアウトを更新するとき、システム アニメーションによってスムーズにレイアウトが切り替わります。

スクリーン キーボードの表示と非表示

アプリのテキスト入力コントロールがフォーカスを受け取ると、スクリーン キーボードが自動的に表示されます。既定では、アプリのコンテンツが自動的にスクロールされ、必要に応じて入力コントロールは画面に表示されたままになります。アプリで特別な処理をする必要はありません。

Windows コントロールと HTML コントロール

次のコントロールにはアニメーションが含まれています。可能であれば、これらのコントロールを使うことをお勧めします。

また、一般的な HTML フォーム コントロール (ボタン、チェック ボックス、ドロップダウン メニューなど) を使う場合は、クリックやマウスでのポイントなどのユーザーの操作に応じてアニメーションを表示する必要はありません。これらのコントロールは、既に必要なアニメーションを含んでいるか、アニメーションを必要としません。これらのコントロールでは、色の変化やその他の視覚的なインジケーターを使って、ユーザーにフィードバックを返します。

これらの要素すべてのスタイルは、Microsoft Visual Studio プロジェクト テンプレートの WinJS CSS ファイルと UI.js ファイルを使って、自動的に適用されます。

アニメーション ライブラリを使う

アニメーション ライブラリを使って、アプリにカスタム アニメーションを追加できます。アニメーション ライブラリはアニメーションのセットであり、Windows や Windows Phone での個性的なアニメーションのデザインを実現します。開発者は、WinJS.UI.Animation 名前空間に含まれる関数を介して、アプリ内でこれらのアニメーションを使うことができます。各アニメーションのビデオやガイドラインなど、アニメーション ライブラリについて詳しくは、「UI のアニメーション化」をご覧ください。

次の場合は、ユーザー独自のアニメーションを用意する必要があります。

  • コントロール全体を移動する
  • アプリのコンテンツを変更する
  • アプリ内のページ間を移動する

アニメーション ライブラリに用意されているすべてのアニメーションは、CSS アニメーションと CSS 切り替えを使って実装されます。アニメーション ライブラリのアニメーションでは、CSS プロパティの "opacity" と "transform" をアニメーション化します。

アニメーション ライブラリ関数で element パラメーターと offset パラメーターを使う

多くのアニメーション ライブラリ関数には、同一の方法で使われる同じパラメーターが含まれています。

element

多くのアニメーション ライブラリ関数では、ドキュメント オブジェクト モデル (DOM) 要素をアニメーション ターゲットとして使います。この element パラメーターは、次の方法で指定できます。

  • アニメーションにアニメーション ターゲットがないことを表す特別な値 "undefined" として指定
  • 1 つのオブジェクトとして指定
  • 要素の JavaScript 配列 (場合によっては空白) として指定
  • ノードリスト (たとえば、querySelectorAll の結果など) として指定
  • HTMLCollection として指定

offset

offset パラメーターは、移動に関連する、要素アニメーションや要素切り替えの一部です。このようなアニメーションでは、オフセット位置から最終的な位置へ、または現在の位置からオフセット位置へ、要素が移動されます。

一部のアニメーションには、お勧めのオフセットがあります。これらのオフセットを使うには、オフセットの引数として null または undefined を渡すか、引数全体を省略します。できる限り、これらの既定のオフセットを使ってください。次のような利点があります。

  • アニメーションのパフォーマンスの向上。
  • 右から左に読むアプリでの自動反転。
  • アプリのサイズが変更されるときに、デザイナーがお勧めする移動距離に基づいて、適切なアニメーションで自動的に調整されます。

魅力的で特別なデザインが用意されていない限りは、以下のアニメーションでは既定のオフセットを必ず使ってください。

アニメーション ライブラリの他のアニメーションでは、オフセットは特定の UI に基づいて、アプリ固有の値を指定できます。次のすべての関数には既定のオフセットがあります。特定のオフセットが指定されていない場合、既定のオフセットが使われますが、通常、アプリのデザインに基づいてオフセットを指定します。

offset パラメーターは、次の形式で指定できます。

  • 特別な値 "undefined" として指定します。呼び出しで明示的に指定できます。また、パラメーター値を省略することで暗黙的に指定することもできます。undefined 値は、アニメーションの既定のオフセットが使われることを意味します。
  • 次の形式で、1 つの JavaScript オブジェクトとして指定します。

    { top: string, left: string, rtlflip: true | false }

    たとえば、次のようになります。

    { top: "12px", left: "0px", rtlflip: true }

    オブジェクトには、アニメーションの開始時に適用されるオフセットを表す top と left というプロパティが必要です。オフセットを表すために、有効な CSS 単位をすべて使うことができます。この形式では、オフセットがアニメーションに関連するすべての要素に適用されます。

    rtlflip パラメーターは、値を右から左の配置に反転します。このパラメーターは left パラメーターに影響を与え、その符号を変更します。たとえば、10 px が -10px になります。このパラメーターはオプションで、省略できます。省略すると、既定値は false になります。

  • 上で説明した {top: ..., left: ..., rtlflip: ...} オブジェクトの JavaScript 配列 (場合によっては空白) として指定します。この場合、配列内の各オブジェクトはアニメーション内の 1 つの要素に適用されます。これらの各オブジェクトは、指定された順序で適用されます (最初のオブジェクトは最初の要素に、2 番目のオブジェクトは 2 番目の要素に、などの順序)。要素の数がこの配列内のオブジェクトの数よりも多い場合、配列内の最後のオブジェクトが残りのすべての要素に適用されます。オフセット レコードの配列が通常必要となるアニメーションは、dragBetweenEnter のみです。他のアニメーションでは、通常、すべての要素に対して使われる 1 つのオフセット レコードのみを渡すことをお勧めします。

Promise の戻り値

アニメーション ライブラリのすべてのアニメーションの戻り値は、Promise オブジェクトです。このオブジェクトの done または then メソッドを使って、アニメーションの完了を追跡できます。また、Promise オブジェクトには cancel メソッドも用意されていて、このメソッドを使って、アニメーションの実行を取り消すことができます。

アニメーションの種類

アニメーション ライブラリのアニメーションは、要素アニメーション、要素切り替え、レイアウト切り替えという 3 つの種類のいずれかになります。各アニメーションの種類には、さまざまな実装パターンがあります。

要素アニメーション

要素アニメーションは CSS アニメーションとして実装されます。要素アニメーションは要素の状態を変更しません。現在の状態の最上位にあるアニメーションです。たとえば、showPanel アニメーションは要素アニメーションであり、作業ウィンドウなどのパネルを画面の端から画面内へスライド移動します。showPanel アニメーションは、開発者が指定したオフセットから要素の現在の位置までのパネルの移動をアニメーション化します。

要素アニメーションを使うには、要素の最終的な状態を設定します。次の例では、myPanel 要素が、表示される前に既に最終的な場所に配置されています。ただし、表示はされていません。このパネルを表示するには、コードでパネル要素の opacity を 1 に設定してから、アニメーションを開始します。これらのステップが同じ関数内で実行される限り、opacity の変更はアニメーションが開始するまで有効になりません。パネルはオフセット位置に表示されてから、アニメーション化されて実際の位置まで移動します。



                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });                                       
                                            

パネルを非表示にするには、処理を逆転します。最初に、コードで hidePanel を呼び出す必要があります。これにより、パネルが現在の位置からオフセット位置までアニメーション化されて移動します。アニメーションの完了時に、コードで opacity を 0 に設定して要素を非表示にします。opacity の変更をインクルードできない場合、アニメーションの終了時に要素が元の位置にスナップされたように見え、要素は画面上に表示されたままになります。



                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });                                       
                                            

アニメーション ライブラリの要素アニメーションを次に示します。

関数説明
showEdgeUI 端に基づく UI をスライドして画面に表示します。オフセット位置から現在の位置までのターゲット要素の移動をアニメーション化します。
hideEdgeUI 端に基づく UI をスライドして画面から消します。現在の位置からオフセット位置までのターゲット要素の移動をアニメーション化します。
showPanel 端に基づく大きなパネルをスライドして画面に表示します。オフセット位置から現在の位置までのターゲット要素の移動をアニメーション化します。
hidePanel 端に基づく大きなパネルをスライドして画面から消します。現在の位置からオフセット位置までのターゲット要素の移動をアニメーション化します。
showPopup コンテキストに沿った UI を画面上に表示します。opacity が 1 の要素をアニメーション化し、オフセット位置から現在の位置までの移動をアニメーション化します。
hidePopup コンテキストに沿った UI を非表示にします。opacity が 0 の要素をアニメーション化します。
updateBadge 数字バッジを更新します。opacity が 1 の要素をアニメーション化し、オフセット位置から現在の位置までの移動をアニメーション化します。

 

要素切り替え

要素切り替えは CSS 切り替えとして実装されます。要素切り替えでは、CSS プロパティをアニメーションで定義された値に切り替えて、要素の状態を変更します。

アニメーション ライブラリの要素切り替えには、一緒に使われることを目的としたアニメーションをペアで適用することで役立つものが多くあります。このペアに含まれる 1 つのアニメーションによって適用される状態の変更は、もう 1 つのアニメーションによって逆転されます。たとえば、fadeIn アニメーションは要素の opacity を 1 に切り替えるのに対して、fadeOut アニメーションは要素の opacity を 0 に切り替えます。

アニメーション ライブラリの一部のアニメーションでは、要素アニメーションと要素切り替えの組み合わせを使います。たとえば、enterContent アニメーションはコンテンツの opacity を 1 に切り替え、さらにオフセット位置から現在の位置までの移動をアニメーション化します。

アニメーション ライブラリのアニメーションで、要素切り替えのみを使うアニメーション、および要素切り替えと要素アニメーションの両方を使うアニメーションを次に示します。

関数説明
fadeIn 一時的な要素またはコントロールを表示します。opacity を 1 に切り替えます。
fadeOut 一時的な要素またはコントロールを非表示にします。opacity を 0 に切り替えます。
enterContent 1 つの要素やコンテンツのセットをアニメーション化して画面に表示します。opacity を 1 に切り替え、オフセット位置から現在の位置までの移動をアニメーション化します。
exitContent 1 つの要素やコンテンツのセットをアニメーション化して画面から消します。opacity を 0 に切り替えます。
enterPage ページのすべてのコンテンツをアニメーション化して画面に表示します。opacity を 1 に切り替え、オフセット位置から現在の位置までの移動をアニメーション化します。
exitPage ページのすべてのコンテンツをアニメーション化して画面から消します。opacity を 0 に切り替えます。
crossFade コンテンツ領域を更新します。差し替え後のコンテンツに対して opacity を 1 に切り替え、差し替え前のコンテンツに対して opacity を 0 に切り替えます。
pointerDown ユーザーがタイルをタップまたはクリックすると、視覚的なフィードバックを返します。拡大/縮小の値を若干小さい値に切り替えます。
pointerUp ユーザーがタイルのタップまたはクリックを解放すると、視覚的なフィードバックを返します。拡大/縮小の値を元のサイズに戻します。
dragSourceStart ユーザーがドラッグ アンド ドロップ操作を開始すると、視覚的なフィードバックを返します。拡大/縮小の値を若干大きい値に切り替え、opacity の値を小さくします。このアニメーションでは、周囲にある (影響を受ける) 要素の拡大/縮小の値を若干小さい値に切り替えます。
dragSourceEnd ドラッグしたオブジェクトをドロップすることによって、ユーザーがドラッグ アンド ドロップ操作を完了すると、視覚的なフィードバックを返します。dragSourceStart によって実行されたアニメーションを逆転します。
dragBetweenEnter ドラッグしているオブジェクトが該当する場所にドロップされるとき、そのオブジェクトの下にある要素がドロップされるオブジェクトを避けるように移動する視覚的なフィードバックを返します。影響を受けるオブジェクトの transform プロパティをオフセットの値に切り替えます。
dragBetweenLeave dragBetweenEnter によって実行されるアニメーションを逆転することによって、ドラッグしているオブジェクトがドロップ エリアから離れたことを示す視覚的なフィードバックを返します。
swipeSelect タイルをスワイプによって選択された状態に切り替えます。オフセットによって "選択された" 表示部分の opacity が 1 に切り替えられている間に、タイルの opacity を 0 に切り替えます。
swipeDeselect タイルをスワイプによる選択が解除された状態に切り替えます。元のタイルの opacity が 1 に切り替えられている間に、オフセットによって "選択された" 表示部分の opacity を 0 に切り替えます。
swipeReveal タイルがスワイプ操作をサポートしていることを示す視覚的なヒントをユーザーに提供します。移動を現在の位置からオフセット位置に切り替えます。
turnstileBackwardIn 要素を時計回りに回転させてページに移動します。
turnstileBackwardOut 要素を時計回りに回転させてページから移動します。
turnstileForwardIn 要素を反時計回りに回転させてページに移動します。
turnstileForwardOut 要素を反時計回りに回転させてページから移動します。
slideDown 画面の下端から外へ要素をスライドします。
slideUp 画面の下端から上へ要素をスライドします。
slideLeftIn 画面の左端から中へ要素をスライドします。
slideLeftOut 画面の左端から外へ要素をスライドします。
slideRightIn 画面の右端から中へ要素をスライドします。
slideRightOut 画面の右端から外へ要素をスライドします。
continuumBackwardIn 差し替え後のページを縮小し、差し替え後の項目を拡大縮小、回転、平行移動します。
continuumBackwardOut 差し替え前のページを削除するときに、ページを拡大縮小、回転、平行移動します。
continuumForwardIn 項目を画面に表示するときに、差し替え後のページを拡大し、差し替え後の項目を拡大縮小、回転、平行移動します。
continuumForwardOut 項目を画面から削除するときに、差し替え前のページを縮小し、差し替え前の項目を拡大縮小、回転、平行移動します。

 

レイアウト切り替え

アニメーション ライブラリのレイアウト切り替えアニメーションは、要素アニメーションや要素切り替えよりも複雑です。一般的に、レイアウト切り替えアニメーションには複数の要素が関連し、結果としてとレイアウト変更が行われます。ただし、アニメーション関数では、レイアウトがどのように変更されるかについて想定することはできません。たとえば reposition アニメーションでは、要素がポイント A からポイント B に移動します。この移動は、要素の幅の変更、要素のオフセットの変更、要素の余白またはパディングの変更など、さまざまな方法で行われます。

レイアウト切り替え用に、アニメーション ライブラリには作成関数が用意されており、.execute() メソッドを使ってオブジェクトが返されます。アニメーション関数の呼び出しパターンは、次のとおりです。

  1. 適切なアニメーション関数を呼び出します。ターゲット要素の現在の位置が収集されます。
  2. アプリでは、選ばれた方法でレイアウト変更が実行されます。
  3. アプリでは、作成関数から返されたオブジェクトの execute メソッドが呼び出され、アニメーションが開始されます。これにより、ターゲット要素の新しい位置が収集され、これらの要素が元の位置から新しい位置までアニメーション化されます。
  4. execute メソッドは、通常の方法で使うことができる Promise オブジェクトを返します。

次の例に、リストに追加するアニメーションを示します。このアニメーションは、リストの最上部に項目を挿入する動作をアニメーション化する際に使われます。createAddToListAnimation が呼び出されると、affectedItems コレクションに渡されたすべての要素の位置が記録されます。新しい項目の挿入によって影響を受ける可能性がある位置を持つすべての要素が、このコレクションに含まれます。

createAddToListAnimation が呼び出されると、この例では、リストの最上部に新しい項目が挿入されます。次のコードでは、list が、リスト項目を含んでいる div 要素になります。要素の insertBefore メソッドを呼び出すと、リストの最上部に newItem が実際に追加されます。この挿入によって、リスト内にある他のすべての項目の位置が変更されます。必要な方法を使って、affectedItems コレクションの位置を自由に変更できます。

最後に、この例ではアニメーションを開始し、createAddToListAnimation によって返されたオブジェクトの execute メソッドを呼び出して、新しいリスト項目を所定の位置に移動します。



                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();
                                            

アニメーション ライブラリにあるレイアウト切り替えアニメーションの作成関数を次に示します。

関数説明
createExpandAnimation 追加のインライン情報を表示します。必要に応じて他のコンテンツを移動し、スペースを確保します。
createCollapseAnimation インライン コンテンツを非表示にします。必要に応じて他のコンテンツを折りたたみます。
createRepositionAnimation 要素を新しい位置に移動します。
createAddToListAnimation リストに項目を追加します。
createDeleteFromListAnimation リストから項目を削除します。
createAddToSearchListAnimation 検索結果をフィルター処理して、リストに項目を追加します。
createDeleteFromSearchListAnimation 検索結果をフィルター処理して、リストから項目を削除します。
createPeekAnimation タイルにプレビュー アニメーションを表示します。プレビュー タイルのコンテンツは、タイルのスペース内で上下にスクロールして通信内容全体を表示します。

 

アニメーションのスケジュール

複雑なシナリオを実行するには、UI のさまざまな部分でさまざまなアニメーションの実行が必要になる場合があります。たとえば、電子メールを削除するとき、リストから削除済みの電子メールを取り除き、次の電子メール メッセージを表示することが必要になる場合があります。このようなシナリオではほとんどの場合、より短い期間で、同時に 2 つのアニメーションを実行する方法が適しています。次のセクションでは、このようなシナリオで注意する必要がある問題について説明します。

アニメーションの中断

要素のアニメーションや切り替えは、同じ CSS プロパティの別のアニメーションや切り替えが開始されると中断されます。このような場合、CSS3 仕様に従って、最初のアニメーションまたは切り替えが取り消されます。CSS 切り替えでは、相互に中断が行われます。また、スムーズかつ滑らかに中断されます。ただし、CSS アニメーションの場合は、要素上に CSS プロパティの切り替えが示されますが、要素の実際の CSS プロパティ値は変更されません。CSS アニメーションを中断すると、元の値への不適切なスナップが行われるため、お勧めできません。通常、CSS アニメーションでは、最初のアニメーションが終了するのを待機してから、2 番目のアニメーションを開始するのがより適切な方法です。詳しくは、「アニメーションの完了を待機する」をご覧ください。

シナリオ結果
CSS アニメーションが CSS アニメーションを中断するアニメーション化されている CSS プロパティが実際の状態に戻ってから、新しいアニメーションが開始されます。これにより、視覚的に不快な表示が発生する場合があります。
CSS アニメーションが切り替えを中断するどのような時点でも切り替えがスムーズに中断され、現在の値から新しい終了値までのアニメーションが開始されます。
CSS 切り替えが切り替えを中断するどのような時点でも切り替えがスムーズに中断され、現在の値から新しい終了値までの切り替えが開始されます。
CSS 切り替えがアニメーションを中断するアニメーション化されている CSS プロパティが実際の状態に戻ってから、新しい切り替えが開始されます。これにより、視覚的に不快な表示が発生する場合があります。

 

アニメーションの取り消し

アニメーション ライブラリの実行中のアニメーションを取り消すことができます。そのためには、アニメーション関数から返された Promise オブジェクトの cancel メソッドを使います。

アニメーションの完了を待機する

アニメーションの完了時にアクションを実行するには、コールバック関数を、アニメーション関数から返された Promise オブジェクトの done メソッドまたは then メソッドに渡します。これは、DOM から項目を削除するために終了アニメーションが完了するのを待機する場合や、複数のアニメーションを連結する場合に立ちます。次に示す例では、フェード インが完了してからターゲットをフェード アウトするコールバック関数を使います。



                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });
                                            

アニメーションが完了したタイミングを判断するために、JavaScript タイマーを使わないことをお勧めします。JavaScript タイマーを使った場合の信頼性は低くなります。タイマーはアニメーションの前または後で完了する場合があり、そのタイミングはハードウェアや UI スレッドで実行している他のプロセスによって異なる可能性があります。

アニメーションを有効および無効にする

  • Applies to Windows

Windows: アニメーション ライブラリのすべてのアニメーションは、[必要のないアニメーションは無効にします] というシステム設定に応じて、無効になります。この設定は、コントロール パネルにある [簡単操作][コンピューターを見やすくします] にあります。この設定を選ぶと、アプリの基本機能にとって必須ではないすべてのアニメーションが無効になります。「必要のないアニメーション」とは、ゲームをプレイするために必要な一部のゲーム アニメーションを除く、すべてのアニメーションを指します。executeAnimation または executeTransition を使うアニメーション ライブラリのアニメーションとカスタム アニメーションは、この設定に自動的に対応します。カスタム アニメーションを作る場合は、コードでこの設定を明示的にリッスンする必要があります。

アプリで使うアニメーション ライブラリのアニメーションが WinJS.UI.enableAnimations および WinJS.UI.disableAnimations 関数に応答するかどうかは、開発者が決めることです。

アニメーションのパフォーマンスの最適化

アニメーションによるアプリの応答性の提示

ユーザー エクスペリエンス全体が優れていることを示すには、軽快な動作とユーザー操作に対する高い応答性をアプリで感じられるようにする必要があります。アプリが正しく使われるときに、アニメーションによってアプリの応答性の高さを示すことができます。そのためには、適切なタイミングで適切なユーザー フィードバックを返します。

ユーザー操作に応答するアニメーションは、できるだけ短時間で開始される必要があります。これは、操作が成功し、それに応答して処理が実行されることをユーザーに通知する際に重要となる点です。新しいページの読み込みなどの切り替えを完了するために追加の処理がある場合は、この処理を、ユーザーの応答に関するアニメーションが開始された後で実行します。

独立型アニメーションを使う

JavaScript アプリ用のアニメーション プラットフォームを使うと、特定の種類のアニメーションを、UI スレッドから独立したハードウェア アクセラレーション対応の別のシステム スレッドで実行できます。こうした種類のアニメーションは独立型アニメーションと呼ばれます。UI スレッドで実行されるアニメーションは依存型アニメーションと呼ばれます。UI スレッドで発生した他の操作と競合する必要がないので、独立型アニメーションでは、依存型アニメーションよりも一定したスムーズなアニメーションを実現できます。

アニメーション ライブラリのすべてのアニメーションは、独立型アニメーションとして実行できます。そのためには、アプリの実装に注意を向ける必要があることを考慮してください。独立型アニメーションとして実行するためのアニメーション関数の呼び出しの利用について詳しくは、「非依存構成: Internet Explorer でのレンダリングと合成」をご覧ください。

同時にアニメーション化する要素の数を最小にする

できる限り、アニメーション化する個々の要素の数を少なくしてください。たとえば、アニメーションに要素の配列を渡すのではなく、親要素だけを渡します。これにより、アニメーション エンジンでは 1 つのアニメーション操作を作ることだけが必要になります。

既定のオフセットを使う

offset パラメーターを含んでいるアニメーション ライブラリのアニメーションでは、できるだけ既定のオフセットを使います。これにより、デザイナーがお勧めするアニメーションの移動を適用できるだけでなく、パフォーマンスも向上します。これは、事前に計算されたキーフレームをアニメーションで使うことができるからです。

また、既定のオフセットは右から左に読むアプリを自動的に反転します。一部のアニメーションでは、アプリのサイズが変更されるときに、既定のオフセットによって移動の量が自動的に変更され、狭いビュー状態で適切な効果を示すことができます。

カスタム アニメーションを作る

できるだけ、アニメーション ライブラリのアニメーションを使ってください。ただし、独自のシナリオがあり、組み込みアニメーションに必要とするアニメーションが含まれていない場合は、カスタム アニメーションを作ることができます。

JavaScript アプリでカスタム アニメーションを実装するには、2 つの方法があります。それは、標準の CSS3 アニメーションと CSS3 切り替えを使う方法、およびアニメーション ライブラリのヘルパー関数である executeAnimationexecuteTransition を使う方法です。

標準の CSS3 アニメーションと CSS3 切り替えを使ってカスタム アニメーションを作る

CSS3 アニメーションと CSS3 切り替えでは、柔軟性のあるオプションを使うことができます。このオプションによって、さまざまな CSS プロパティを対象としてアニメーションや切り替えを作ることができます。詳しくは、「アニメーション」および「切り替え」のトピックをご覧ください。

独自のアニメーションを作るときは、次の点に注意してください。

  • 一部の CSS プロパティを対象としたアニメーションまたは切り替えは、独立型アニメーションとしては実行できません。また、ページ全体がすべてのフレームで再描画される可能性があります。これにより、ユーザー エクスペリエンスが低下した、動きの遅いぎくしゃくしたアニメーションが作られる場合があります。カスタム アニメーションの実装では、このようなプロパティをアニメーション化することを避けて、アニメーションか独立型で実行されるようにしてください。
  • カスタムの CSS3 アニメーションまたは CSS3 切り替えは、同じ要素上でアニメーション ライブラリのアニメーションと同時には共存できません。

executeAnimation と executeTranslation 使ってカスタム アニメーションを作る

アニメーション ライブラリの関数 executeAnimationexecuteTransition は、アニメーション ライブラリ独自のアニメーションを実行するために、アニメーション ライブラリによって使われます。これらの関数をユーザーのカスタム アニメーションで使うこともできます。これらの関数によって実行されるすべてのアニメーションと切り替えは、独立型アニメーションとして実行するために利用できます。また、これらのアニメーションと切り替えは、実行中のアニメーション ライブラリのストック アニメーションと共存できます。executeAnimationexecuteTransition 関数は、アニメーション ライブラリの他の関数と同様に、Promise オブジェクトを返します。

これら 2 つの関数は、アニメーション化が可能なすべての CSS プロパティに対して使うことができます。ただし、"opacity" と "transform" プロパティだけは独立型アニメーションとして実行できます。ゲーム内アニメーションなどのより魅力的な特徴がアプリで必要となる場合は、これらの関数は適していない可能性があります。

executeAnimation 関数を使うときは、パフォーマンスを向上させるためにアニメーションのキーフレームを指定することをお勧めします。



                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }
                            

次の例は、カスタム アニメーションを示しています。



                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}
                            

次の例は、カスタム切り替えを示しています。



                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}
                            

カスタム アニメーションとカスタム切り替えの組み合わせ

アニメーションと切り替えを組み合わせて、カスタム ストーリーボードを作ることができます。次の例では、アニメーションと切り替えを組み合わせて、ターゲット要素に対してフェード インとスライドの効果が同時に発生するようにしています。ストーリーボードの 2 つの部分は、executeAnimationexecuteTransition を呼び出すことにより個別にトリガーされますが、これら 2 つの部分の開始は同時です。



                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            



                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}
                            

関連トピック

UI のアニメーション化 (HTML)

 

 

表示:
© 2014 Microsoft