スワイプ ジェスチャのアニメーション化 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
スワイプ アニメーションは、項目の選択に Windows 8 タッチ選択モデル (スワイプ**) を実装する場合に使います。
このアニメーションは、次の API で構成されます。スワイプ操作を実装する場合、この 3 つのアニメーションをすべて使う必要があります。
スワイプ対応アニメーションのデモは、次のビデオでご覧いただけます。
次のビデオは、スワイプ選択アニメーションとスワイプ選択解除アニメーションのデモです。
注意
ListView コントロールにはタッチ選択とスワイプのアニメーションが含まれているため、そのコントロールを使うと、これらのアニメーションを実装する必要はありません。
スワイプ選択
ユーザーがスワイプ選択をサポートする項目をドラッグするときは、スワイプ選択アニメーションを使います。項目は、選択するのに十分離れた場所までドラッグしてから解放する必要があります。スワイプ選択アニメーションでは、"選択されている" 状態を示す選択インジケーター (多くの場合、チェック マーク) を項目に追加し、項目をその定位置に戻します。
.png "スワイプ選択アニメーションの段階 (移動とチェック) を示す図")
このアニメーションを使うには、表示される選択インジゲーターのほか、アニメーションが移動する方向と距離を把握しておく必要があります。
スワイプ選択解除
スワイプ選択解除アニメーションは、現在選択されている項目を、選択解除するのに十分離れた場所までドラッグして解放したときに使います。スワイプ選択解除アニメーションでは、選択インジケーターを項目から削除し、項目をその定位置に戻します。
.png "スワイプ選択解除アニメーションの段階 (移動とチェックの取り消し) を示す図")
このアニメーションを使うには、非表示になる選択インジゲーターのほか、アニメーションが移動する方向と距離を把握しておく必要があります。
スワイプ対応
スワイプ対応アニメーションを使って、項目がスワイプ操作をサポートしていることをユーザーに示します。スワイプ操作がサポートされている項目をユーザーが長押しすると、アニメーションによって項目がいったん下側に移動した後、上側に戻ります。これが、その項目がスワイプ操作をサポートしていることを示すヒントになります。
.png "スワイプ対応アニメーションの段階 (移動とチェックの取り消し) を示す図")
このアニメーションを使うには、アニメーションが移動する方向と距離を把握しておく必要があります。このアニメーションでは、まず指定した方向に項目を動かし、それから元の位置に戻すという 2 つの動作を順番に実行する必要があります。
その他のリソース
スワイプ アニメーションの API の使い方を示すコード例については、HTML アニメーション ライブラリのサンプルに関するページをご覧ください。