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
イベントは、次のハンドラーをトリガーします。
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": "アイテムがスワイプされました!"
}
}
]
}