ドラッグ アニメーションDrag animations

ドラッグ アンド ドロップ アニメーションは、リスト内で項目を移動するときや、特定の項目を別の項目上にドロップするときなど、オブジェクトを移動する際に使います。Use drag-and-drop animations when users move objects, such as moving an item within a list, or dropping an item on top of another.

重要な API:DragItemThemeAnimation クラスImportant APIs: DragItemThemeAnimation class

推奨と非推奨Do's and don'ts

ドラッグ開始のアニメーションDrag start animation

  • ドラッグの開始アニメーションは、ユーザーがオブジェクトを動かし始めるときに使います。Use the drag start animation when the user begins to move an object.
  • ドラッグ アンド ドロップ操作の影響を受けるオブジェクトが他に存在する場合に限り、それらのオブジェクトをアニメーションに含めるようにします。Include affected objects in the animation if and only if there are other objects that can be affected by the drag-and-drop operation.
  • ドラッグの開始アニメーションによって始まったアニメーションのシーケンスの終了には、ドラッグの終了アニメーションを使います。Use the drag end animation to complete any animation sequence that began with the drag start animation. ドラッグの終了アニメーションにより、ドラッグの開始アニメーションで変化したドラッグされたオブジェクトのサイズが元に戻ります。This reverses the size change in the dragged object that was caused by the drag start animation.

ドラッグ終了のアニメーションDrag end animation

  • ドラッグの終了アニメーションは、ドラッグされたオブジェクトをドロップするときに使います。Use the drag end animation when the user drops a dragged object.
  • ドラッグの終了アニメーションは、リストの追加および削除アニメーションと組み合わせて使います。Use the drag end animation in combination with add and delete animations for lists.
  • ドラッグの開始アニメーションに影響を受けるオブジェクトが存在する場合に限り、それらのオブジェクトをドラッグの終了アニメーションに含めるようにします。Include affected objects in the drag end animation if and only if you included those same affected objects in the drag start animation.
  • ドラッグの終了アニメーションは、ドラッグの開始アニメーションよりも先に使わないでください。Don't use the drag end animation if you have not first used the drag start animation. ドラッグ シーケンスの完了後にオブジェクトを元のサイズに戻すためには、両方のアニメーションを使う必要があります。You need to use both animations to return objects to their original sizes after the drag sequence is complete.

ドラッグ間アニメーションを入力してください。Drag between enter animation

  • 項目間でのドラッグの開始アニメーションは、2 つのオブジェクトの間のドロップ可能な場所にドラッグ ソースをドラッグするときに使います。Use the drag between enter animation when the user drags the drag source into a drop area where it can be dropped between two other objects.
  • 適度な大きさのドロップ ターゲット領域を選んでください。Choose a reasonable drop target area. この領域が小さすぎると、ドラッグ ソースをドロップする際に重ね合わせるのが難しくなるため、好ましくありません。This area should not be so small that it is difficult for the user to position the drag source for the drop.
  • ドロップ可能な場所を示すために影響を受けるオブジェクトが移動するときには、互いにまっすぐに引き離すことをお勧めします。The recommended direction to move affected objects to show the drop area is directly apart from each other. 移動方向が上下になるか、左右になるかは、影響を受けるオブジェクトが並ぶ向きによって異なります。Whether they move vertically or horizontally depends on the orientation of the affected objects to each other.
  • ドラッグ ソースを領域内にドロップできない場合、項目間でのドラッグの開始アニメーションは使わないでください。Don't use the drag between enter animation if the drag source cannot be dropped in an area. 項目間へのドラッグの開始アニメーションは、影響を受けるオブジェクトの間にドラッグ ソースをドラッグできることをユーザーに知らせるためのものです。The drag between enter animation tells the user that the drag source can be dropped between the affected objects.

Leave アニメーション間でドラッグしますDrag between leave animation

  • 項目間でのドラッグの中止アニメーションは、ユーザーがオブジェクトをドラッグして 2 つのオブジェクトの間のドロップ可能な領域から出すときに使います。Use the drag between leave animation when the user drags an object away from an area where it could have been dropped between two other objects.
  • 項目間でのドラッグの開始アニメーションよりも先に、項目間でのドラッグの中止アニメーションを使わないでください。Don't use the drag between leave animation if you have not first used the drag between enter animation.

開発者向けFor developers