SwipeAwayジェスチャー

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

注： SwipeAwayは、TouchWrapperコンポーネントと組み合わせて使用できます。ほかのタッチ可能なコンポーネントは、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イベントは、次のハンドラーをトリガーします。

onDown
onMove
onCancel（スワイプジェスチャーを識別）
onSwipeMove（スワイプ位置が変わるたびに繰り返し）
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": "アイテムがスワイプされました！"
      }
    }
  ]
}