SwipeAwayジェスチャー



SwipeAwayジェスチャー

SwipeAwayジェスチャーは、タッチ可能なコンポーネントのスワイプをサポートして、さまざまなコンポーネントを表示できます。ユーザーは、特定の方向にコンポーネントをスワイプすることで、SwipeAwayをトリガーします。SwipeAwayを使用すると、「スワイプして消去」操作を作成できます。

プロパティ

ジェスチャーには次のプロパティがあります。

プロパティ 型 デフォルト 説明
type "SwipeAway" 必須 "SwipeAway"のみ指定できます。
action string slide スワイプジェスチャー中に、元のコンポーネントと子コンポーネントを表示する方法を指定します。reveal | slide | coverのいずれかです。
direction string 必須 ユーザーがスワイプしてジェスチャーをアクティブにする方向です。left | right | up | downのいずれかです。
item, items コンポーネントとレイアウトの配列 [] スワイプジェスチャー中およびジェスチャー後に表示する新しい項目です。この項目で元の項目を置き換えます。
onSwipeMove コマンドの配列 [] スワイプ位置が変更すると実行されるコマンドです。
onSwipeDone コマンドの配列 [] スワイプが完了したときに実行するコマンドです。

action

actionプロパティは、元のコンポーネントがviewportを終了する方法、および新しいコンポーネントが画面上に現れる方法を制御します。actionプロパティは、次の値を取ることができます。

タイプ 元のコンポーネント 子コンポーネント
cover 固定位置にとどまります。 元のコンポーネントの上にスライドし、元のコンポーネントを覆います。
reveal 画面の外にスライドします。 元のコンポーネントの背後の固定位置に現れ、元のコンポーネントがスライドして画面の外に消えると全体が表示されます。
slide 画面の外にスライドします。 画面の中にスライドします。子コンポーネントの先端が元のコンポーネントの後端に付きます。

coverとrevealのスワイプアクションには、クリッピング領域が設定されません。重なるコンポーネントの背景が透過的な場合は、下のコンポーネントが表示されます。

direction

ユーザーがスワイプジェスチャーをトリガーするためにスワイプする方向です。directionプロパティは、次の値を取ることができます。

型 説明
down コンポーネントの上から下へスワイプ
left コンポーネントの右から左へスワイプ
right コンポーネントの左から右へスワイプ
up コンポーネントの下から上へスワイプ

items

元のコンポーネントを置き換える子コンポーネントまたはレイアウトです。itemsに複数項目の配列が含まれる場合、whenプロパティで選択された最初の項目（1つの子のインフレート）が使用されます。

子コンポーネントのサイズと位置は、元のコンポーネントと同じです。itemsに子コンポーネントを指定しない場合でも、スワイプは発生します。ただし、スワイプアクションがcoverの場合、ユーザーにはスワイプが完了するまでスワイプの効果が見えません。

onSwipeMove

スワイプ位置の移動時に実行するコマンドです。このコマンドは、スワイプの位置が変わるたびに実行されます。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型    
    "handler": "SwipeMove",
    ...                     // コンポーネントのソースプロパティ  
  },
  "position": NUMBER,   // スワイプ距離の割合（%）を表す0～1の間の数値            
  "direction": "STRING"   // "left"、"right"、"up"、"down"のいずれかに一致するスワイプ方向          
}

positionプロパティは、現在のスワイプ距離を表す、0～1の間の数値です。値0はスワイプなし（元のコンポーネントのみが表示されている）、値1はスワイプ完了（子コンポーネントのみが表示されている）を表します。

directionプロパティは、ジェスチャーで定義されたdirectionプロパティです。

event.sourceの詳細についてはイベントソースを参照してください。

onSwipeMoveハンドラーは、高速モードで実行されます。

onSwipeDone

スワイプが完了したときに実行するコマンドです。スワイプジェスチャーが完了すると、このコマンドが実行されます。ユーザーがスワイプを止めるとコマンドは実行されず、元のコンポーネントが表示されたままになります。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型    
    "handler": "SwipeDone",
    ...                     // コンポーネントのソースプロパティ  
  },
  "direction": "STRING"   // "left"、"right"、"up"、"down"のいずれかに一致するスワイプ方向          
}

directionプロパティは、ジェスチャーで定義されたdirectionプロパティです。

event.sourceの詳細についてはイベントソースを参照してください。

onSwipeDoneハンドラーは通常モードで実行されます。

SwipeAwayジェスチャーのイベントシーケンス

ユーザーがSwipeAwayジェスチャーを開始すると、SwipeAwayジェスチャーされたコンポーネントはスワイプで画面外に移動し、itemsプロパティで定義された新しいコンポーネントが表示されます。スワイプジェスチャーでは、左／右ジェスチャーでのコンポーネント幅分の移動、上／下ジェスチャーでのコンポーネント高さ分の移動が制限されます。

SwipeAwayイベントは、次のハンドラーをトリガーします。

  1. onDown
  2. onMove
  3. onCancel（スワイプジェスチャーを識別）
  4. onSwipeMove（スワイプ位置が変わるたびに繰り返し）
  5. onSwipeDone（ユーザーがスワイプを終了し、アニメーションが完了した後）

SwipeAwayジェスチャーは、ユーザーがコンポーネントをタップして、スワイプ方向（direction）にドラッグすると発生します。

SwipeAwayジェスチャーでは、「フリング」がサポートされます。 つまり、ユーザーは、コンポーネント全体をスワイプしなくても、ジェスチャーを完了できます。代わりに、ジェスチャーが2つのシナリオでスワイプの完了をアニメーション化します。

  • ユーザーが、50%を超える位置までドラッグした後でコンポーネントから手を放したとき。
  • ユーザーが、50%を超える位置に到達するのに十分な時間、コンポーネントをスワイプしたとき。

スワイプが完了しない場合、コンポーネントが元のコンポーネントに戻るアニメーションが表示されます。

スワイプが最後まで完了すると、元のコンポーネントが削除されます。子コンポーネントが、その場所に表示されます。最後までスワイプされたコンポーネントを最初の状態に戻すことはできません。

子コンポーネントの選択

スワイプジェスチャーが開始すると、itemsの子配列にあるwhenがtrueの最初の項目が、1つの子のインフレートルールに従ってインフレートされます。子項目の位置とサイズは、元のタッチ可能なコンポーネントのディメンションと位置に合わせて更新されます。スワイプ動作中、元のコンポーネントと子コンポーネントのtransformが、元のコンポーネントの後端と子コンポーネントの先端が現在のスワイプ位置に一致するよう更新されます。これにより、子コンポーネントが画面に現れる位置が、画面から消えるコンポーネントの端に接するような効果が生まれます。

スワイプして消去する例

以下は、スワイプ位置に応じて右または左にチェックマークを配置する「スワイプして消去」ジェスチャーハンドラーの例です。

{
  "type": "TouchWrapper",
  "item": {
    "type": "Text",
    "text": "Lorem ipsum dolor",
    "fontSize": "50"
  },
  "gestures": [
    {
      "type": "SwipeAway",
      "direction": "left",
      "items": {
        "type": "Frame",
        "backgroundColor": "purple",
        "items": {
          "componentId": "MyCheck",
          "type": "Text",
          "text": "✓",
          "fontSize": 60,
          "color": "white",
          "width": 60,
          "height": "100%",
          "textAlign": "center",
          "textVerticalAlign": "center"
        }
      },
      "onSwipeMove": {
        "type": "SetValue",
        "componentId": "MyCheck",
        "property": "transformX",
        "value": "${event.position * event.source.width < event.target.width || event.position > 0.5 ? 0 : event.position * event.source.width - event.target.width}"
      },
      "onSwipeDone": {
        "type": "SendEvent",
        "arguments": "アイテムがスワイプされました！"
      }
    }
  ]
}
Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment